css – 有条件地申请CLASS的最佳方式是什么?

假设您有一个数组,该数组ul使用lifor中的每个元素和控制器上的属性进行渲染selectedIndex。在AngularJS中li使用索引添加类的最佳方法是selectedIndex什么?

我目前正在复制(手动)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支持必须求值的表达式

  1. 一串以空格分隔的类名,或
  2. 一个类名称数组,或
  3. 类名的映射/对象为布尔值。

所以,使用表格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'"

我会补充一点,因为其中一些答案似乎过时了。我是这样做的:

<class="ng-class:isSelected">

其中’isSelected’是在范围角度控制器中定义的javascript变量。

为了更具体地解决您的问题,您可以通过以下方式生成列表:

HTML

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>

JS

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}

请参阅:http//jsfiddle.net/tTfWM/

见:http//docs.angularjs.org/api/ng.directivengClass

添加评论

友情链接:蝴蝶教程