如何有条件地将 CSS 类应用到 AngularJS 中的元素？

AngularJS 的条件类应用

在 AngularJS 中，您可能会遇到需要根据某些条件有条件地将类应用于元素的场景。以下是如何有效地实现这一目标。

问题：

考虑渲染为 ul 的元素数组，每个元素带有 li 标签。您在控制器上有一个 selectedIndex 属性，并且想要向具有相应索引的 li 添加一个类。

解决方案：

1.使用 ng-class：

AngularJS 提供了 ng-class 指令，它允许您基于表达式动态应用类。要将“selected”类有条件地应用于具有 selectedIndex 的 li，您可以使用：

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

2。使用 ng:class:

（v1 之前的语法）

对于 v1 之前的 AngularJS 版本，您可以将 ng:class 与计算结果的表达式一起使用直接指向类名。例如：

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

解决方案比较：

虽然两种解决方案实现相同的结果，但功能不同：

• ng-class 接受一个对象，其中属性名称代表类名称，属性值确定是否应用该类。这允许更复杂的类应用程序逻辑。
• ng:class 需要一个计算结果为特定类名称的表达式，并且在有条件地处理多个类时不太灵活。

附加说明：

您还可以使用此技术将模型属性映射到类名称，将 CSS 类保留在控制器代码之外。例如：

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

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