更新三元条件变量 angular

Question

我是 angular 的新手，我想知道如何实现以下目标：

我在我的变量中使用三元条件在两种语言之间切换而无需刷新我的页面并显示具有正确标题的项目 (ng-repeat)。

{{isEnglish ? item.name_en : item.name_fr}}

我有一个切换开关 isEnglish 到 true 或 false，但是变量在切换布尔值时不会自行更新。我需要应用更改吗？有办法吗？

语言切换

<a href="" class="fb border_link" ng-click="changelanguage();">
    {{displayLanguage}}
</a>

ng-click函数

$scope.changelanguage = function(){
    console.log("changing language");
    console.log($scope.$parent.isEnglish);
    if($scope.selectedLanguage === 'en'){
      $translate.use('fr');
      $scope.$parent.isEnglish = false;
      console.log($scope.$parent.isEnglish);
      $scope.selectedLanguage = 'fr';
      $scope.displayLanguage = 'English';
      console.log("en");
    }
    else{
      $translate.use('en');
      $scope.$parent.isEnglish = true;
      console.log($scope.$parent.isEnglish);
      $scope.selectedLanguage = 'en';
      $scope.displayLanguage = 'Français';
      console.log("fr");
    }
  }

Answer 1

更新 2：由于您将 isEnglish 分配给 $scope.$parent，您可能会遇到与 $scope 相关的问题。

为了帮助解决问题，我会使用 Batarang 之类的东西来计算 $scope.isEnglish 对各种 $scope 的值。或者，您可以在三元组旁边放置一个 {{ isEnglish }} 绑定，以确认在调用 changelanguage 时设置了 isEnglish。如果不是，那将归结为您的子范围和独立范围的结构。

更新 1：您在问题中发布的代码运行良好。这是一个有效的 plunkr。从您的评论来看，也许您在 ng-click 中分配了一个子范围。您是直接在 ng-click 表达式中进行赋值还是通过方法（如在我的 plunkr 中）进行赋值？

JS

app.controller('MainCtrl', function($scope) {
  $scope.isEnglish = true;

  $scope.toggle = function _toggle() {
    $scope.isEnglish = !$scope.isEnglish;
  };

  $scope.item = {
    name_en: 'en name',
    name_fr: 'fr name'
  };
});

HTML

<body ng-controller="MainCtrl">
  <div>
    <button ng-click="toggle()">
      Toggle isEnglish
    </button>
  </div>
  <br>
  <br>

  <div>
    isEnglish:
  </div>
  <div>
    <b>{{ isEnglish }}</b>
  </div>
  <br>

  <div>
    isEnglish ? item.name_en : item.name_fr:
  </div>
  <div>
    <b>{{isEnglish ? item.name_en : item.name_fr}}</b>
  </div>
</body>

如果它类似于在摘要周期之外发生的自定义指令，您可能需要将切换包装在 $scope.apply 调用中：

// 'scope' is argument in directive link function.
function toggle() {
  scope.$apply(function () {
    scope.isEnglish = !scope.isEnglish;
  });
}

Answer 2

尝试使 isEnglish 成为对象属性，如 settings.isEnglish。 Angular 附加到作用域的原始变量存在一些问题。

更新三元条件变量 angular

Updating Ternary condition variable angular

javascript

angularjs

ternary-operator