Question

我有一个ng-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}}表达式是在加载控件的类之后进行评估，如果给出1它正在工作，或者如果我签入inspect元素，我可以看到[1==1]即{{1}这是返回正确的值，但类没有得到应用

可以参考此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 }"

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

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

如果表达式值为 false ，则应用类无效

所以使用：

<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添加多个额外的工作层，仅用于简单的真/假测试。最值得注意的是，您在ng指令中有{{ }}表达式。 AFAIK，所有这些都已跟踪您放入的表达式，添加{{ }}只会增加需要观看的内容。

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

应用css后ng-class评估中的角度表达（后期绑定）

2 个答案: