有条件地应用课程的最佳方式是什么?

比方说你有一个是在渲染阵列ulli的每个元素,并呼吁在控制器上的属性selectedIndex 。 什么是一类添加到最好的办法li与指数selectedIndex在AngularJS?

我目前正在复制(手工) li代码,并将其添加到li标签之一,并使用ng-showng-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'"
    
    链接地址: http://www.djcxy.com/p/15475.html

    上一篇: What is the best way to conditionally apply a class?

    下一篇: Why em instead of px?