有条件地在AngularJS中应用ngClass

Question

使ngClass成为条件表达式的任何方法。 例如，我已经尝试使用javascript进行以下操作：

 $scope.setEnabled = function(status){
    $scope.filterEnabled = status;
    if(status){
      angular.element(document.querySelector( '#enabledFalse')).removeClass('active-btn');
      angular.element(document.querySelector( '#enabledTrue')).addClass('active-btn');
    } else {
      angular.element(document.querySelector( '#enabledTrue')).removeClass('active-btn');
      angular.element(document.querySelector( '#enabledFalse')).addClass('active-btn');
    }  
  }

并查看：

div class="buttons"> 
        <a id="enabledFalse" href="" ng-click="setEnabled(0)" class="click-btn active-btn">No</a> 
        <a id="enabledTrue" href="" ng-click="setEnabled(1)" class="click-btn">Yes</a> 
      </div>

使用ngClass应用此方法的最佳方法是什么？

Answer 1

这是条件语句的样子：

<a href class="click-btn" ng-class="{ 'active-btn' : filterEnabled }" ng-click="setEnabled(0)">No</a>
<a href class="click-btn" ng-class="{ 'active-btn' : !filterEnabled }" ng-click="setEnabled(1)">Yes</a>

js就是：

$scope.setEnabled = function(status){
  $scope.filterEnabled = status;
}

编辑：作为一种选择，这是我能想到的最简化的方法：

<a href class="click-btn" ng-class="{ 'active-btn' : filterEnabled }" ng-click="filterEnabled = !filterEnabled">{{ filterEnabled ? 'Yes' : 'No' }}</a>

js文件中不需要任何内容​​。 单击此按钮时，Yes / No文本和active-btn类将切换，因为它们仅取决于filterEnabled的值。
假设只有一个按钮是可以接受的。

Answer 2

在我的SO标签舒适区域之外，但是您可以使用三元表达式，其中每个标签都设置为另一个标签的取反：

... id="enabledFalse" ng-class="( filterEnabled)? 'active-btn' : ''"
... id="enabledTrue"  ng-class="(!filterEnabled)? 'active-btn' : ''"

可以将无条件应用的其他类放在常规的类属性中。

同样在每个标签中：

ng-click="filterEnabled=!filterEnabled"

如果您希望每个人都进行切换，或者在需要时调用该函数。