выражение ng-класса оценивает только свойство scope

Question

У меня есть 2 divs с ng-классом, применяемым для оценки свойства $ scope, называемого {{stepNumber}}.

<div id="step0" class="col-xs-2" ng-class="{{stepNumber}} == 0 ? 'active' : {{stepNumber}} > 1 ? 'complete' : 'disabled' "> 

<div id="step1" class="col-xs-2" ng-class="{{stepNumber}} == 1 ? 'active' : {{stepNumber}} > 1 ? 'complete' : 'disabled' "> 

В первый раз, когда страница загружается, {{stepNumber}} is 0,

первого ДИВ получает класс активного, 2-й DIV получает класс отключено.

Когда я нажимаю кнопку, которая использует нг-нажмите для увеличения значения свойства, делая $scope.stepNumber++;, дивы не переоценивать выражение нг-класса.

{{STEPNUMBER}} теперь 1, но первый класс ДИВ является ещеактивный класс, второй ДИВ является ещеотключил

Как я могу получить нг-класс переоценивать выражение?

Answer 1

Это не так, как работает ng-класс. Прочитайте its documentation тщательно. Правильный код будет выглядеть так:

ng-class="{active: stepNumber == 0, complete: stepNumber > 1, disabled: stepNumber != 0 && stepNumber <= 1}" 

или

class="col-xs-2, {{stepNumber == 0 ? 'active' : stepNumber > 1 ? 'complete' : 'disabled' }}" 

или

ng-class="stepNumber == 0 ? 'active' : stepNumber > 1 ? 'complete' : 'disabled'"