javascript - 有条件地在 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 的值。
这是假设只有一个按钮是可以接受的。