假设你有一个在ul
呈现的数组,每个元素都有一个li
,而控制器上的一个属性叫做selectedIndex
。什么是一类添加到最好的办法li
与指数selectedIndex
在 AngularJS?
我目前正在复制(手动) 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 类保留在 Controller 代码之外。
ng-class支持必须求值的表达式
所以,使用表格 3)我们可以简单地写
ng-class="{'selected': $index==selectedIndex}"
另请参阅如何在 AngularJS 中有条件地应用 CSS 样式?为了更广泛的答案。
更新 :Angular 1.1.5 增加了对三元运算符的支持,因此如果您更熟悉该结构:
ng-class="($index==selectedIndex) ? 'selected' : ''"
我最喜欢的方法是使用三元表达式。
ng-class="condition ? 'trueClass' : 'falseClass'"
注意:如果你使用的是 Angular 的旧版本,你应该使用它,
ng-class="condition && 'trueClass' || 'falseClass'"