这是我的 Html 代码:
<div ng-controller="MainController">
<ul class="list-holder">
<li ng-repeat="check in checks" ng-class="{active : isSelected(check)}">
<button ng-click="setcolor(check)">{{check.name}} </button>
<button ng-click="setcolor(check)">{{check.name}} </button>
<button ng-click="setcolor(check)">{{check.name}} </button>
<hr>
</li>
</ul>
<hr>
{{selected | json}}
</div>
这是我的 Controller
function MainController($scope) {
$scope.checks = [
{name: 'sports'},
{name: 'movies'},
{name: 'Others'}
];
$scope.setcolor = function(chk) {
$scope.selected = chk;
}
$scope.isSelected = function(check) {
return $scope.check === check;
}
}
这是我的 CSS 文件
.active {
background-color: red;
}
我想使用切换功能在每一行中选择一个按钮。假设在第一行中选择了按钮 1,在第二行中选择了按钮 2,在第三行中选择了按钮 1。
最佳答案
看起来你在 isSelected
函数中有一点错误。您想与 $scope.selected
属性进行比较:
$scope.isSelected = function(check) {
return $scope.selected === check;
}
关于javascript - 如何在 ng-repeat 中添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26254534/