假设你有一个在ul中呈现的数组，每个元素都有一个li，控制器上有一个名为selectedIndex的属性。在AngularJS中，用索引selectedIndex向li中添加类的最好方法是什么?
我目前复制(手工)li代码，并将类添加到li标记之一，并使用ng-show和ng-hide只显示每个索引一个li。
当前回答
我要补充一点，因为有些答案似乎已经过时了。我是这样做的:
<class="ng-class:isSelected">
其中'isSelected'是定义在作用域角控制器中的javascript变量。 为了更具体地解决你的问题，下面是你如何用它生成一个列表:
超文本标记语言
<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.directive: ngClass
其他回答
下面是另一个在ng-class不能使用时工作得很好的选项(例如在样式化SVG时):
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
(我认为你需要使用最新的不稳定Angular才能使用ng-attr-，我目前使用的是1.1.4)
我最喜欢的方法是使用三元表达式。
ng-class="condition ? 'trueClass' : 'falseClass'"
注意:如果你使用的是旧版本的Angular，你应该使用这个，
ng-class="condition && 'trueClass' || 'falseClass'"
你可以使用这个npm包。它可以处理所有事情，并基于变量或函数为静态类和条件类提供选项。
// Support for string arguments
getClassNames('class1', 'class2');
// support for Object
getClassNames({class1: true, class2 : false});
// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], {
class5 : function() { return false; },
class6 : function() { return true; }
});
<div className={getClassNames({class1: true, class2 : false})} />
我要补充一点，因为有些答案似乎已经过时了。我是这样做的:
<class="ng-class:isSelected">
其中'isSelected'是定义在作用域角控制器中的javascript变量。 为了更具体地解决你的问题，下面是你如何用它生成一个列表:
超文本标记语言
<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.directive: ngClass
只是添加了一些对我来说有用的东西，经过大量的搜索……
<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">
希望这有助于您的成功开发。
=)
无文档的表达式语法:伟大的网站链接…=)
