假设你有一个在ul中呈现的数组,每个元素都有一个li,控制器上有一个名为selectedIndex的属性。在AngularJS中,用索引selectedIndex向li中添加类的最好方法是什么?
我目前复制(手工)li代码,并将类添加到li标记之一,并使用ng-show和ng-hide只显示每个索引一个li。
假设你有一个在ul中呈现的数组,每个元素都有一个li,控制器上有一个名为selectedIndex的属性。在AngularJS中,用索引selectedIndex向li中添加类的最好方法是什么?
我目前复制(手工)li代码,并将类添加到li标记之一,并使用ng-show和ng-hide只显示每个索引一个li。
当前回答
我最喜欢的方法是使用三元表达式。
ng-class="condition ? 'trueClass' : 'falseClass'"
注意:如果你使用的是旧版本的Angular,你应该使用这个,
ng-class="condition && 'trueClass' || 'falseClass'"
其他回答
我是Angular的新手,但我发现这个可以解决我的问题:
<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>
这将有条件地应用一个基于var的类。 它以默认的icon-download开始,使用ng-class,我检查showDetails的状态,如果为真/假,并应用class icon-upload。它工作得很好。
希望能有所帮助。
我最近做的是这样的:
<input type="password" placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">
isshows值是位于我的控制器上的值,可以通过单击按钮进行切换,单括号之间的部分是我在css文件中创建的类。
编辑:我还想补充一点,codeschool.com有一个免费的课程,由谷歌赞助,在AngularJS上,涵盖了所有这些东西。不需要支付任何东西,只是注册一个帐户,然后开始! 祝大家好运!
Ng-class支持必须求值为任意一个的表达式
以空格分隔的类名字符串,或者 类名数组,或 类名到布尔值的映射/对象。
因此,使用表单3,我们可以简单地写
ng-class="{'selected': $index==selectedIndex}"
参见如何在AngularJS中有条件地应用CSS样式?更广泛的答案。
更新:Angular 1.1.5增加了对三元操作符的支持,所以如果你对这个结构更熟悉的话:
ng-class="($index==selectedIndex) ? 'selected' : ''"
如果你不想像我一样把CSS类名放在控制器中,这里有一个我从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代码之外。
我要补充一点,因为有些答案似乎已经过时了。我是这样做的:
<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