假设你有一个在ul中呈现的数组,每个元素都有一个li,控制器上有一个名为selectedIndex的属性。在AngularJS中,用索引selectedIndex向li中添加类的最好方法是什么?

我目前复制(手工)li代码,并将类添加到li标记之一,并使用ng-show和ng-hide只显示每个索引一个li。


当前回答

三元运算符刚刚在1.1.5中被添加到角解析器中。

所以最简单的方法就是:

ng:class="($index==selectedIndex)? 'selected' : ''"

其他回答

这就像一个魅力;)

<ul class="nav nav-pills" ng-init="selectedType = 'return'">
    <li role="presentation" ng-class="{'active':selectedType === 'return'}"
        ng-click="selectedType = 'return'"><a href="#return">return

    </a></li>
    <li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
        ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
    </a></li>
</ul>

我最喜欢的方法是使用三元表达式。

ng-class="condition ? 'trueClass' : 'falseClass'"

注意:如果你使用的是旧版本的Angular,你应该使用这个,

ng-class="condition && 'trueClass' || 'falseClass'"

如果你有一个应用于很多元素的公共类,你可以创建一个自定义指令来添加这个类,比如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支持必须求值为任意一个的表达式

以空格分隔的类名字符串,或者 类名数组,或 类名到布尔值的映射/对象。

因此,使用表单3,我们可以简单地写

ng-class="{'selected': $index==selectedIndex}"

参见如何在AngularJS中有条件地应用CSS样式?更广泛的答案。


更新:Angular 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}

由于火绒