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

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


当前回答

我是Angular的新手,但我发现这个可以解决我的问题:

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

这将有条件地应用一个基于var的类。 它以默认的icon-download开始,使用ng-class,我检查showDetails的状态,如果为真/假,并应用class icon-upload。它工作得很好。

希望能有所帮助。

其他回答

我要补充一点,因为有些答案似乎已经过时了。我是这样做的:

<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

如果你想超越二进制计算,让你的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>

Ng-class支持必须求值为任意一个的表达式

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

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

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

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


更新:Angular 1.1.5增加了对三元操作符的支持,所以如果你对这个结构更熟悉的话:

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

只是添加了一些对我来说有用的东西,经过大量的搜索……

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

希望这有助于您的成功开发。

=)

无文档的表达式语法:伟大的网站链接…=)

我最近遇到了一个类似的问题,决定只创建一个条件过滤器:

  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>