假设你有一个在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-show/ng-hide。
这个指令会在按钮被点击时添加类'active'
module.directive('ngActive', ['$animate', function($animate) {
return function(scope, element, attr) {
scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
$animate[value ? 'addClass' : 'removeClass'](element, 'active');
});
};
}]);
更多信息
其他回答
下面是另一个在ng-class不能使用时工作得很好的选项(例如在样式化SVG时):
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
(我认为你需要使用最新的不稳定Angular才能使用ng-attr-,我目前使用的是1.1.4)
如果你正在使用angular pre v1.1.5(即没有三元操作符),并且你仍然想要在这两种情况下使用等效的方法来设置值,你可以这样做:
ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"
如果你不想像我一样把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代码之外。
我是Angular的新手,但我发现这个可以解决我的问题:
<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>
这将有条件地应用一个基于var的类。 它以默认的icon-download开始,使用ng-class,我检查showDetails的状态,如果为真/假,并应用class icon-upload。它工作得很好。
希望能有所帮助。
如果你想超越二进制计算,让你的CSS远离你的控制器,你可以实现一个简单的过滤器,根据map对象计算输入:
angular.module('myApp.filters, [])
.filter('switch', function () {
return function (input, map) {
return map[input] || '';
};
});
这允许你像这样写你的标记:
<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
...
</div>