假设您有一个呈现为的数组,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代码之外。