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

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

假设你有一个在ul呈现的数组，每个元素都有一个li ，而控制器上的一个属性叫做selectedIndex 。什么是一类添加到最好的办法li与指数selectedIndex在AngularJS？

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

#1楼

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

  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>

#2楼

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

一串以空格分隔的类名，或
一个类名称数组，或
类名的映射/对象为布尔值。

所以，使用表格3）我们可以简单地写

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

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

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

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

#3楼

如果您想超越二进制评估并将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>

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

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

#5楼

查看http://www.codinginsight.com/angularjs-if-else-statement/

臭名昭着的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-cloak { display: none }

谢谢amadou

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3152891

标签

ng-class