有条件地申请课程的最佳方式是什么？

Question

假设您有一个数组,该数组ul使用lifor中的每个元素和控制器上的属性进行渲染selectedIndex.在AngularJS中li使用索引添加类的最佳方法是selectedIndex什么？

我目前正在复制(手动)li代码并将类添加到其中一个li标记并使用ng-show和ng-hide仅显示li每个索引一个.

Answer 1

如果您不想像我一样将CSS类名称放入Controller中,这是我从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代码之外.

Answer 2

ng-class支持必须求值的表达式

1. 一串以空格分隔的类名,或
2. 一个类名称数组,或
3. 类名的映射/对象为布尔值.

所以,使用表格3)我们可以简单地写

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

另请参阅如何在AngularJS中有条件地应用CSS样式？为了更广泛的答案.

更新:Angular 1.1.5增加了对三元运算符的支持,因此如果您更熟悉该结构:

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

Answer 3

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

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

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

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

Answer 4

我会补充一点,因为其中一些答案似乎过时了.我是这样做的:

<class="ng-class:isSelected">

其中'isSelected'是在范围角度控制器中定义的javascript变量.


为了更具体地解决您的问题,您可以通过以下方式生成列表:

HTML

<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

Answer 5

这是一个更简单的解决方案:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}

.selected {
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>

Answer 6

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

  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>

Answer 7

如果您想超越二进制评估并将CSS保留在控制器之外,您可以实现一个简单的过滤器,根据地图对象评估输入:

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>

Answer 8

我最近做的是这样做:

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

该isShowing值是一个位于我的控制器上的值,只需单击一个按钮即可切换,单个括号之间的部分是我在css文件中创建的类.

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

Answer 9

三元运算符刚刚被添加到1.1.5中的角度解析器中.

所以现在最简单的方法是:

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

Answer 10

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

<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的完整代码页

Answer 11

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

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

这将有条件地应用基于var的类.它以默认的图标下载开始,使用ng-class,我检查showDetailsif 的状态true/false并应用class icon-upload.它工作得很好.

希望能帮助到你.

Answer 12

这就像一个魅力;)

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

Answer 13

这可能会被遗忘,但这里是我如何使用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>

Answer 14

这是我在工作中有条件地做出的多个判断：

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 ?</span>
</li>