假设你有一个在ul中呈现的数组，每个元素都有一个li，控制器上有一个名为selectedIndex的属性。在AngularJS中，用索引selectedIndex向li中添加类的最好方法是什么?
我目前复制(手工)li代码，并将类添加到li标记之一，并使用ng-show和ng-hide只显示每个索引一个li。
当前回答
你可以使用这个npm包。它可以处理所有事情，并基于变量或函数为静态类和条件类提供选项。
// Support for string arguments
getClassNames('class1', 'class2');
// support for Object
getClassNames({class1: true, class2 : false});
// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], {
class5 : function() { return false; },
class6 : function() { return true; }
});
<div className={getClassNames({class1: true, class2 : false})} />
其他回答
我建议你用一个返回true或false的函数来检查控制器中的条件。
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
在你的控制器中检查情况
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
这里有一个更简单的解决方案:
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>
你可以使用这个npm包。它可以处理所有事情，并基于变量或函数为静态类和条件类提供选项。
// Support for string arguments
getClassNames('class1', 'class2');
// support for Object
getClassNames({class1: true, class2 : false});
// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], {
class5 : function() { return false; },
class6 : function() { return true; }
});
<div className={getClassNames({class1: true, class2 : false})} />
我最喜欢的方法是使用三元表达式。
ng-class="condition ? 'trueClass' : 'falseClass'"
注意:如果你使用的是旧版本的Angular，你应该使用这个，
ng-class="condition && 'trueClass' || 'falseClass'"
检查这个。
臭名昭著的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-斗篷{显示:none}
由于火绒
