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

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


当前回答

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

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

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

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

其他回答

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

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

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

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

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

  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>

这就像一个魅力;)

<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>

如果你正在使用angular pre v1.1.5(即没有三元操作符),并且你仍然想要在这两种情况下使用等效的方法来设置值,你可以这样做:

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"

我最近做的是这样的:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

isshows值是位于我的控制器上的值,可以通过单击按钮进行切换,单括号之间的部分是我在css文件中创建的类。

编辑:我还想补充一点,codeschool.com有一个免费的课程,由谷歌赞助,在AngularJS上,涵盖了所有这些东西。不需要支付任何东西,只是注册一个帐户,然后开始! 祝大家好运!