假设您有一个呈现为的数组,ul其中li每个元素都有一个,控制器上有个名为的属性selectedIndex。li用selectedIndexAngularJS中的索引向类添加类的最佳方法是什么?
ul
li
selectedIndex
我目前正在(手动)复制li代码并将类添加到li标签之一中,并使用ng-show和ng-hide仅显示li每个索引一个。
ng-show
ng-hide
如果您不想像我一样将CSS类名放入Controller中,这是自v1之前的日子开始使用的古老技巧。我们可以编写一个表达式,该表达式直接计算为 所选 的类名,不需要自定义指令:
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代码之外。