css - 有条件地申请类(class)的最佳方式是什么？

Question

假设您有一个在 ul 中呈现的数组，其中每个元素都有一个 li 并且在 Controller 上有一个名为 selectedIndex 的属性.在 AngularJS 中使用索引 selectedIndex 向 li 添加类的最佳方法是什么？

我目前正在(手动)复制 li 代码并将该类添加到 li 标记之一并使用 ng-show和 ng-hide 每个索引只显示一个 li。

Answer 1

如果您不想像我一样将 CSS 类名放入 Controller 中，这里是我从 v1 之前的日子开始使用的一个老技巧。我们可以编写一个直接评估类名selected的表达式，不需要自定义指令:

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

请注意带冒号的旧语法。

还有一种新的更好的有条件地应用类的方法，例如:

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

Angular 现在支持返回对象的表达式。该对象的每个属性(名称)现在都被视为一个类名，并根据其值应用。

然而，这些方式在功能上并不相同。这是一个例子:

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

因此，我们可以通过将模型属性基本映射到类名来重用现有的 CSS 类，同时将 CSS 类排除在 Controller 代码之外。