ng-class表达式仅计算范围属性一次

Question

我有两个带有ng-class的div用于评估$ 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，

第1个div获取类活动，第2个div获取类禁用。

单击使用 ng-click 按钮通过执行$scope.stepNumber++;来增加属性值的按钮时，div不会重新评估ng-class表达式。

{{stepNumber}}现在为1，但第一个div类仍 活动，第二个div类仍然 已禁用

如何让ng-class重新评估表达式？

Answer 1

这不是ng-class的工作方式。仔细阅读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'"