Angular ng-class 中的表达式在应用 css 后评估（后期绑定）

Question

我有一个 ng-class，其中 class 是动态加载的，即在表达式中评估 $rootscope，后期绑定正在发生

<li role="presentation" style="width:200px" ng-class="{active: true, inactive: false}[{{vm.$rootScope.currentPage}}==1]"><a href="#/create">Create</a></li>

此处 {{vm.$rootScope.currentPage}} 表达式在 class 之后进行评估，因为如果给 1 它正在工作或者如果我检查检查元素我可以看到 [1==1] 即 {{vm.$rootScope.currentPage}} 这是返回正确的值但是 class 没有被应用

可以参考这个Condition in ng- class not working

Answer 1

你应该使用 [vm.$rootScope.currentPage===1] 而不是 [{{vm.$rootScope.currentPage}}==1] 。无需在 []

中使用 {{}}

需要改变

ng-class="{true: 'active', false:'inactive' }" 而不是 ng-class="{'active': true , 'inactive':false }"

for ng-class="{true: 'active', false:'inactive' }[vm.$rootScope.currentPage==1]" class 应用方式

如果表达式值为 true 则应用 class active

如果表达式值为 false 则应用 class inactive

所以使用：

<li role="presentation" style="width:200px" ng-class="{true: 'active', false:'inactive' }[vm.$rootScope.currentPage===1]"><a href="#/create">Create</a></li>

也可以在 ng-class 中使用三元运算符，例如：ng-class="vm.currentPage===1? 'active': 'inactive'"

<li role="presentation" style="width:200px" ng-class="vm.currentPage===1? 'active': 'inactive'">
      <a href="#/create">Create</a>
 </li>

PLUNKER DEMO

Answer 2

试试这个- ng-class="vm.$rootScope.currentPage==1?'active':'inactive'".

您正在为 Angular 添加多个额外的工作层，只是为了一个简单的 true/false 测试。最值得注意的是，您在 ng 指令中有一个 {{ }} 表达式 。 AFAIK，所有这些都已经跟踪了您输入的表达式，添加 {{ }} 只是添加了更多需要观看的内容。

您也可以将它简单地称为 currentPage，而不是 vm.$rootScope.currentPage，但这取决于您是否为它的任何组件设置了范围。

Angular ng-class 中的表达式在应用 css 后评估（后期绑定）

Angular Expression in ng-class evaluating after css is applied (late binding)

javascript

css

angularjs

ng-class