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