更新三元条件变量angular

时间:2016-07-11 03:28:11

标签: javascript angularjs ternary-operator

我对角度很新,我想知道如何实现以下目标:

我在变量中使用三元条件在两种语言之间切换而不刷新页面并使用正确的标题显示项目({{isEnglish ? item.name_en : item.name_fr}} )。

isEnglish

我有一个切换true切换到false<a href="" class="fb border_link" ng-click="changelanguage();"> {{displayLanguage}} </a> ,但切换布尔值时变量不会自动更新。我是否需要应用更改?有办法吗?

语言切换

$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");
    }
  }

ng-click功能

document.getElementById("inlineRadio1_gender").click();
$("#inlineRadio1_gender").prop("checked", true);
document.getElementById("inlineRadio1_gender").checked = true;

2 个答案:

答案 0 :(得分:2)

尝试将isEnglish设为像settings.isEnglish这样的对象属性。 Angular对范围附加的原始变量存在一些问题。

答案 1 :(得分:0)

更新2:由于您将isEnglish分配给$scope.$parent,因此可能会遇到$scope相关问题。

为了帮助排查问题,我要使用Batarang之类的内容来确定$scope.isEnglish$scope的价值。{{ isEnglish }}。或者,您可以在三元组旁边添加isEnglish绑定,以确认在调用changelanguage时设置了ng-click。如果它还没有归结为您的孩子和孤立范围的结构。

更新1:您在问题中发布的代码运行正常。这是一个有效的plunkr。从您的评论来看,也许您在ng-click中有一个孩子范围。你是直接在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' }; }); 表达式中完成作业,还是通过一种方法(比如我的plunkr)完成作业?

<强> JS

<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>

<强> HTML

$scope.apply

您可能需要在// 'scope' is argument in directive link function. function toggle() { scope.$apply(function () { scope.isEnglish = !scope.isEnglish; }); } 调用中包含切换,如果它类似于在摘要周期之外发生的自定义指令:

SupportFramgentManager