如何在 AngularJS 列表中高效应用条件类？

在 AngularJS 中实现条件类应用

问题：

设想一个 AngularJS 应用程序渲染数组作为无序列表，特定索引处的元素需要显示自定义类。如何有效地实现这一点？

解决方案：

要根据条件动态应用类，有几种方法：

• 使用表达式ngClass:

  <li ng:class="{true: 'selected', false: ''}[$index == selectedIndex]">...</li>

  这种经典方法直接计算为布尔值，如果索引与 selectedIndex 属性匹配，则分配“selected”类。

• 使用对象表达式ngClass:

  <li ng-class="{selected: $index == selectedIndex}">...</li>

  AngularJS 现在允许基于对象表达式进行类分配。每个属性名称代表一个类，其值决定其存在。

• 将模型属性映射到类：

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

  这种高级方法将模型属性映射到类名称，提供根据任何条件分配类的灵活性，而无需依赖ngIf/ngHide。

请记住，方法的选择取决于您对代码结构和维护的具体要求和偏好。

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