有条件地申请一个class级的最好方法是什么?

比方说,你有一个数组,呈现在一个ul为每个元素和一个名为selectedIndex的控制器上的属性。 在AngularJS中用indexIndex添加一个类到li的最好方法是什么?

我目前正在复制(手动) li代码,并将其添加到li标签之一,并使用ng-showng-hide来显示每个索引只有一个li

如果你不想像我这样把CSS类的名字放到Controller中,这是我在v1之前的一个老招。 我们可以编写一个expression式直接评估select的类名,不需要自定义指令:

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

请注意旧的语法与冒号。

有条件地应用课程还有一个更好的方法,比如:

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

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

但是这些方式在function上并不相同。 这里是一个例子:

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

因此,我们可以通过基本上将模型属性映射到类名来重用现有的CSS类,同时保持CSS类不在Controller代码中。

ng-class支持一个必须评估为的expression式

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

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

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

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


更新 :Angular 1.1.5增加了对三元运算符的支持,所以如果这个构造对你更熟悉:

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

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

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

注意:如果您使用Angular的旧版本,则应该使用此版本,

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

我会补充一点,因为这些答案似乎过时了。 以下是我如何做到这一点:

 <class="ng-class:isSelected"> 

其中“isSelected”是在作用域angular度控制器中定义的JavaScriptvariables。

要更具体地解决您的问题,以下是您可以如何生成一个列表:

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

这是一个更简单的解决scheme:

 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> 

我最近面临类似的问题,并决定创build一个条件filter:

  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元素的数组或者是一个string,它被转换成一个数组,并且附加一个空string作为第二个元素:

 <li ng-repeat="item in products | filter:search | orderBy:orderProp | page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)"> ... </li> 

如果您想要超越二元评估并将您的CSS保留在您的控制器之外,您可以实现一个简单的filter,用于根据地图对象评估input:

 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> 

三元运算符刚刚被添加到1.1.5的angular度分析器中。

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

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

最近我是这么做的:

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

isShowing值是位于我的控制器上的一个值,通过单击button进行切换,单括号之间的部分是我在我的css文件中创build的类。

编辑:我也想补充一点,codechool.com有一个免费的课程,由谷歌赞助的AngularJS,这一切,这些东西,然后一些。 没有必要支付任何东西,只需注册一个帐户,并开始! 祝大家好运!

我们可以做一个function来pipe理具有条件的返回类

在这里输入图像描述

 <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如果例子

我是Angular的新手,但是已经find了解决我的问题的方法:

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

这将有条件地应用基于var的类。 它以图标下载作为默认开始,使用ng-class,我检查showDetails的状态,如果true/false并应用类图标上传 。 它的工作很棒。

希望它有帮助。

它工作正常;)

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

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

局部

  <div class="col-md-4 text-right"> <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' : 'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a> <a ng-class="campaign_range === 'all' ? 'btn btn-blue' : 'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a> </div> 

调节器

  $scope.campaign_range = "all"; $scope.change_range = function(range) { if (range === "all") { $scope.campaign_range = "all" } else { $scope.campaign_range = "thismonth" } }; 

这是另一个选项,当ng-class不能被使用时(例如当样式化SVG时),这个选项很好用:

 ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}" 

(我认为你需要使用最新的不稳定Angular来使用ng-attr-,我目前在1.1.4上)

以及我会build议你检查你的控制器的条件与返回truefalse的函数。

 <div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div> 

并在你的控制器检查条件

 $scope.getTodayForHighLight = function(today, date){ return (today == date); } 

这是在我的工作中有条件地判断:

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

如果你正在使用angular pre v1.1.5 (即没有三元运算符) ,你仍然需要一个等价的方法来设置两个条件的值,你可以这样做:

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

如果你有一个应用于很多元素的公共类,你可以创build一个自定义的指令来添加类如ng-show / ng-hide。

如果点击该指令,该button将把“active”类添加到button上

 module.directive('ngActive', ['$animate', function($animate) { return function(scope, element, attr) { scope.$watch(attr.ngActive, function ngActiveWatchAction(value){ $animate[value ? 'addClass' : 'removeClass'](element, 'active'); }); }; }]); 

更多信息

只要添加一些今天为我工作,经过多次search…

 <div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]"> 

希望这有助于你的成功发展。

=)

未logging的expression式语法:伟大的网站链接… =)

检查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 }

谢谢阿马杜