有条件申请课程的最佳方法是什么?

假设您有一个以ul形式呈现的数组,其中每个元素都有一个li ,并且在控制器上有一个名为selectedIndex的属性。在 AngularJS 中使用索引selectedIndexli添加类的最佳方法是什么?

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

答案

如果您不想像我一样将 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 代码之外。

ng-class支持一个表达式,其值必须为

  1. 一串用空格分隔的类名,或者
  2. 类名数组,或者
  3. 类名到布尔值的映射 / 对象。

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

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

另请参阅如何在 AngularJS 中有条件地应用 CSS 样式?以获得更广泛的答案。


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

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

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

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

注意:如果您使用的是 Angular 的旧版本,则应改用它,

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

我将对此加以补充,因为其中一些答案似乎已过时。这是我的方法:

<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

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

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>

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

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>

如果您不希望进行二进制评估,而将 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>

我最近做的是这样做的:

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

isShowing值是位于控制器上的值,可通过单击按钮切换该值,并且单个括号之间的部分是我在 css 文件中创建的类。

编辑:我还想补充一点,codeschool.com 有一个免费课程,由 google 在 AngularJS 上赞助,涵盖了所有这些东西,然后再介绍一些。无需支付任何费用,只需注册一个帐户就可以开始!祝大家好运!

三元运算符1.1.5 中添加到角度解析器中。

因此,最简单的方法是:

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

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

在此处输入图片说明

<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 的完整代码页( 例如)