如何有条件地应用 AngularJS 中的类？

AngularJS 中条件应用类的优雅解决方案

显示元素数组时，您可能会遇到需要突出显示基于特定元素的情况在一个财产上。在 AngularJS 中，类的这种条件应用可以通过多种方式来实现。

一种简单的解决方案，虽然并不理想，但它是手动复制列表元素 (li) 并向与所选元素对应的类添加一个类指数。不过，AngularJS 提供了更复杂的方法来实现此任务。

基于表达式的类赋值

要直接向带有 selectedIndex 索引的 li 添加类，您可以在 ng-class 指令中使用条件表达式：

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

此表达式的计算结果为如果当前索引与 selectedIndex 匹配，则为“selected”，否则为空字符串。

基于对象的类映射

较新的语法允许您根据返回对象的表达式：

ng-class="{selected: $index==selectedIndex}"

在这种情况下，“selected”属性将作为类应用，如果当前索引与 selectedIndex 匹配。

属性到类名称映射

为了更灵活的方法，您可以将模型属性直接映射到类名称：

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

此表达式使用 user.role 属性来确定要应用哪个类。例如，如果用户的角色是“admin”，则“enabled”类将添加到元素中。

以上是如何有条件地应用 AngularJS 中的类？的详细内容。更多信息请关注PHP中文网其他相关文章！