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

Question

我有 2 个带有 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，,

第一个 div 获得类活动，第二个 div 类被禁用。

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

{{stepNumber}} 现在为 1，但第一个 div 类仍 处于活动状态，第二个 div 类仍处于 禁用状态

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

Answer 1

这不是 ng-class 的工作方式。仔细阅读其文档。正确的代码是：

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'"