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 text和active-btn类将切换，因为它们仅取决于filterEnabled的值。
假设只有一个按钮可以接受。

Answer 2

在我的SO-tag舒适区之外，在这里，你可以使用三元表达式，其中每个标签被设置为对另一个标签的否定：

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

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

同样在每个标签中：

ng-click="filterEnabled=!filterEnabled"

如果您希望每个人都切换，或者按照您的方式调用该功能。

有条件地在AngularJS中应用ngClass

2 个答案: