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

【问题标题】：Angular Expression in ng-class evaluating after css is applied (late binding)应用 css 后 ng-class 评估中的 Angular 表达式（后期绑定）
【发布时间】：2016-08-03 06:16:21
【问题描述】：

我有一个 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 它正在工作，或者如果我签入检查元素，我可以看到[1==1] 即{{vm.$rootScope.currentPage}} 这是返回正确的值但是课程没有得到应用

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

【问题讨论】：

标签： javascript css angularjs ng-class

【解决方案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，则应用类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

【讨论】：

Not Working ，在检查元素中我可以看到 [{{vm.$rootScope.currentPage===1}}] 这为 [true] 但仍然类不适用，因为表达式评估在将类应用于该控件后完成
更新了我的答案并添加了 plunker demo @sudhir
真棒兄弟，实际上，在单击功能中，我维护了一个全局变量并在应用类后更新的各个控制器中更新它。当我使用点击功能并传递参数时，这一切都有效，这是更好的方式，谢谢！
不客气。实际上我添加了两个按钮来更改页面和检查更改。您可以根据需要使用，我给出了有效的表达式来设置类。如果对你有帮助可以接受:)
可以接受，但问题是为什么在评估 rootscope 时不起作用，即它正在更新，但在应用类后评估该表达式。但是，您提供的解决方案最适合我的方案

【解决方案2】：

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

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

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

【讨论】：

它不起作用，如果你不放置代码表达式，ng-class 将不会被视为角度表达式，尤其是 ng-class 、 ng-show 和 ng-hide AFAIK
vm.$rootScope.currentPage==1?'active':'inactive' 是一个表达式。我认为您可能引用了错误的内容。