假设你有一个在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。它工作得很好。

希望能有所帮助。

其他回答

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

  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>

检查这个。

臭名昭著的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}

由于火绒

这就像一个魅力;)

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

我们可以创建一个函数来管理带条件的返回类

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    switch(strValue) {
                        case "It is Red":return "Red";break;
                        case "It is Yellow":return "Yellow";break;
                        case "It is Blue":return "Blue";break;
                        case "It is Green":return "Green";break;
                        case "It is Gray":return "Gray";break;
                    }
                }
        }]);
</script>

然后

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

你可以参考ng-class的完整代码页if example

如果你不想像我一样把CSS类名放在控制器中,这里有一个我从v1时代以前就使用的老技巧。我们可以编写一个表达式,直接计算所选的类名,不需要自定义指令:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

请注意使用冒号的旧语法。

还有一种新的更好的有条件地应用职业的方法,比如:

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

Angular现在支持返回对象的表达式。该对象的每个属性(名称)现在都被视为一个类名,并根据其值应用。

然而,这些方式在功能上并不相等。这里有一个例子:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

因此,我们可以通过将模型属性映射到类名来重用现有的CSS类,同时将CSS类排除在Controller代码之外。