Question

我正在从数据中动态创建多对按钮。我在堆栈上发现了一个问题，看起来它可以解决我的问题并实现它，但是当我单击一行中的某个特定按钮时，它会激活该行中的两个按钮。单击时我只想要一个或另一个改变颜色。我怎么能绕过这个？感谢。

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;
        };
    })

Answer 1

我认为在这种情况下最好将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>

AngularJS - 如何在按钮单击时更改一对按钮之一的颜色

1 个答案:

演示：http://plnkr.co/edit/JyoBvFOcT9sQYIJVIJyn?p=info