有条件地申请一个class级的最好方法是什么？
比方说，你有一个数组，呈现在一个ul为每个元素和一个名为selectedIndex的控制器上的属性。 在AngularJS中用indexIndex添加一个类到li的最好方法是什么？
我目前正在复制（手动） li代码，并将其添加到li标签之一，并使用ng-show和ng-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式
- 空格分隔的类名称string，或
- 类名称的数组，或者
- 类名到布尔值的映射/对象。
所以，使用表格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议你检查你的控制器的条件与返回true或false的函数。
<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> | <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 }
谢谢阿马杜
