我正在从数据中动态创建多对按钮。我在堆栈上发现了一个问题，看起来它可以解决我的问题并实现它，但是当我单击一行中的某个特定按钮时，它会激活该行中的两个按钮。单击时我只想要一个或另一个改变颜色。我怎么能绕过这个？感谢。
HTML：
<div class="form-horizontal" data-ng-repeat="item in event.Events">
<div class="form-group">
<div class="col-xs-12 col-md-6 col-lg-6">
<button type="button" class="btn form-control"
data-ng-class="{'btn-success': pickChosen, 'btn-default': !pickChosen}"
data-ng-click="pick()">
</button>
</div>
<div class="col-xs-12 col-md-6 col-lg-6">
<button type="button" class="btn form-control"
data-ng-class="{'btn-success': pickChosen, 'btn-default': !pickChosen}"
data-ng-click="pick()">
</button>
</div>
</div>
</div>
控制器：
.controller('dashController', function ($scope, $http) {
$scope.pickChosen = false;
//....
$scope.pick = function () {
//non-important code
this.pickChosen = true;
};
})
答案 0 :(得分：0)
我认为在这种情况下最好将pickChosen作为按钮索引，而不是布尔然后切换按钮类来比较索引pickChosen == 1 ? 'btn-success' : 'btn-default'：
<div class="form-group">
<div class="col-xs-12 col-md-6 col-lg-6">
<button type="button" class="btn form-control" data-ng-class="[pickChosen == 1 ? 'btn-success' : 'btn-default']" data-ng-click="pickChosen = 1; makePick()">{{item.name}}</button>
</div>
<div class="col-xs-12 col-md-6 col-lg-6">
<button type="button" class="btn form-control" data-ng-class="[pickChosen == 2 ? 'btn-success' : 'btn-default']" data-ng-click="pickChosen = 2; makePick()">{{item.name}}</button>
</div>
</div>