假设你有一个在ul中呈现的数组，每个元素都有一个li，控制器上有一个名为selectedIndex的属性。在AngularJS中，用索引selectedIndex向li中添加类的最好方法是什么?
我目前复制(手工)li代码，并将类添加到li标记之一，并使用ng-show和ng-hide只显示每个索引一个li。
当前回答
我最近做的是这样的:
<input type="password" placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">
isshows值是位于我的控制器上的值，可以通过单击按钮进行切换，单括号之间的部分是我在css文件中创建的类。
编辑:我还想补充一点，codeschool.com有一个免费的课程，由谷歌赞助，在AngularJS上，涵盖了所有这些东西。不需要支付任何东西，只是注册一个帐户，然后开始! 祝大家好运!
其他回答
我最近遇到了一个类似的问题，决定只创建一个条件过滤器:
angular.module('myFilters', []).
/**
* "if" filter
* Simple filter useful for conditionally applying CSS classes and decouple
* view from controller
*/
filter('if', function() {
return function(input, value) {
if (typeof(input) === 'string') {
input = [input, ''];
}
return value? input[0] : input[1];
};
});
它接受一个参数，该参数是一个2元素数组或一个字符串，它被转换为一个数组，并将一个空字符串作为第二个元素:
<li ng-repeat="item in products | filter:search | orderBy:orderProp |
page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
...
</li>
我建议你用一个返回true或false的函数来检查控制器中的条件。
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
在你的控制器中检查情况
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
这可能会被否决，但下面是我如何使用1.1.5的三元操作符来切换类，取决于表中的一行是第一行、中间一行还是最后一行——除非表中只有一行:
<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>
如果你正在使用angular pre v1.1.5(即没有三元操作符)，并且你仍然想要在这两种情况下使用等效的方法来设置值，你可以这样做:
ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"
我要补充一点，因为有些答案似乎已经过时了。我是这样做的:
<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
