问题

假设你有一个数组,在 ul 中用每个元素的 li 来渲染,控制器上的一个属性称为 selectedIndex .在AngularJS中使用索引 selectedIndex li 添加类的最好方法是什么?

我目前正在复制 li 代码,并将该类添加到 li 标签之一,并使用 ng-show ng-hide 每个索引只显示一个 li .



解决方法

如果你不想像我一样把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类.




相关问题推荐