假设你有一个在ul中呈现的数组，每个元素都有一个li，控制器上有一个名为selectedIndex的属性。在AngularJS中，用索引selectedIndex向li中添加类的最好方法是什么?
我目前复制(手工)li代码，并将类添加到li标记之一，并使用ng-show和ng-hide只显示每个索引一个li。
当前回答
这里有一个更简单的解决方案:
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的新手，但我发现这个可以解决我的问题:
<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>
这将有条件地应用一个基于var的类。 它以默认的icon-download开始，使用ng-class，我检查showDetails的状态，如果为真/假，并应用class icon-upload。它工作得很好。
希望能有所帮助。
这里有一个更简单的解决方案:
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>
如果你不想像我一样把CSS类名放在控制器中，这里有一个我从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代码之外。
我们可以创建一个函数来管理带条件的返回类
<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的完整代码页if example
我建议你用一个返回true或false的函数来检查控制器中的条件。
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
在你的控制器中检查情况
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
