假设你有一个在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');
});
};
}]);
更多信息
其他回答
这可能会被否决,但下面是我如何使用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>
你可以使用这个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})} />
三元运算符刚刚在1.1.5中被添加到角解析器中。
所以最简单的方法就是:
ng:class="($index==selectedIndex)? 'selected' : ''"
检查这个。
臭名昭著的AngularJS if|else语句!! 当我开始使用Angularjs时,我有点惊讶地发现我找不到if/else语句。
所以我在一个项目上工作,我注意到当使用if/else语句时,条件显示在加载时。 您可以使用ng-cloak来修复这个问题。
<div class="ng-cloak">
<p ng-show="statement">Show this line</span>
<p ng-hide="statement">Show this line instead</span>
</div>
.ng-斗篷{显示:none}
由于火绒
下面是另一个在ng-class不能使用时工作得很好的选项(例如在样式化SVG时):
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
(我认为你需要使用最新的不稳定Angular才能使用ng-attr-,我目前使用的是1.1.4)