ng-class 表达式只评估范围 属性 一次

Question

我有 2 个 div 应用了 ng-class 来评估 $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、

第一个 div 获得 class 活动 ，第二个 div 获得 class 禁用.

当我单击一个使用 ng-click 的按钮时，通过执行 $scope.stepNumber++; 来增加 属性 值，divs 会不重新计算 ng-class 表达式。

{{stepNumber}} 现在是 1 但第一个 div class 是 still active,第二个divclass是仍然禁用

如何让 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'"