условно применять ngClass в AngularJS

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

Вне моего SO-таг зоны комфорта, то здесь, но вы можете использовать трехкомпонентную выражение, в котором каждый тег является установка как отрицание другого:

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

Другие классы, которые должны применяться безоговорочно может быть помещенный в обычный атрибут класса.

Также в каждом теге:

ng-click="filterEnabled=!filterEnabled" 

, если вы хотите, чтобы каждый для переключения, или вызовите функцию, как у вас есть.

Answer 2

Вот что условный оператор будет выглядеть следующим образом:

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

Edit: В качестве альтернативы, здесь самый упрощенный метод, который я могу думать of

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

Вам ничего не понадобится в файле js; текст «Да/Нет» и класс active-btn будут переключаться при нажатии этой единственной кнопки, потому что они зависят исключительно от значения filterEnabled.
Предполагается, что допускается только одна кнопка.