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

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


当前回答

这可能会被否决,但下面是我如何使用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>

其他回答

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

  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>

你可以使用这个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})} />

如果你有一个应用于很多元素的公共类,你可以创建一个自定义指令来添加这个类,比如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');
    });
  };
}]);

更多信息

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

<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

这可能会被否决,但下面是我如何使用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>