假设你有一个在ul中呈现的数组，每个元素都有一个li，控制器上有一个名为selectedIndex的属性。在AngularJS中，用索引selectedIndex向li中添加类的最好方法是什么?
我目前复制(手工)li代码，并将类添加到li标记之一，并使用ng-show和ng-hide只显示每个索引一个li。
当前回答
这是我在工作中多次有条件的判断:
<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>
其他回答
Ng-class支持必须求值为任意一个的表达式
以空格分隔的类名字符串，或者 类名数组，或 类名到布尔值的映射/对象。
因此，使用表单3，我们可以简单地写
ng-class="{'selected': $index==selectedIndex}"
参见如何在AngularJS中有条件地应用CSS样式?更广泛的答案。
更新:Angular 1.1.5增加了对三元操作符的支持，所以如果你对这个结构更熟悉的话:
ng-class="($index==selectedIndex) ? 'selected' : ''"
我最近遇到了一个类似的问题，决定只创建一个条件过滤器:
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>
我理解这个问题是针对angular的，但如果有人在使用React或基于React的框架(Amplify、NextJS、Serverless等)，解决方案就简单多了。最有效的方法是使用这样的三元运算符:
<div className={condition ? "classnameiftrue" : "classnameiffalse"}>
如果使用useState()，您可以使用此策略来动画树，因为每次状态改变时，它都会用新值重新加载该条件。
部分
<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"
}
};
我是Angular的新手，但我发现这个可以解决我的问题:
<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>
这将有条件地应用一个基于var的类。 它以默认的icon-download开始，使用ng-class，我检查showDetails的状态，如果为真/假，并应用class icon-upload。它工作得很好。
希望能有所帮助。
