javascript - 应用 css 后 ng 类中的 Angular Expression 评估(后期绑定(bind))

Question

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

<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}} 表达式正在加载控件的类之后进行评估，而不是如果给 1 它正在工作或者如果我检查检查元素 I可以看到 [1==1] 即 {{vm.$rootScope.currentPage}} 这返回了正确的值但是类没有被应用

可以引用这个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':假}”

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

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

如果表达式值为false，则应用类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