javascript - 在按钮上切换类(选择/取消选择)

Question

我正在使用 ng-repeat 从数据中动态创建按钮。一次只能连续单击一个按钮。我现在想要做的是能够取消选择一个被点击的按钮，而且还可以根据它是否被点击来改变按钮的类别。我试图用下面的代码来实现这一点，但它显然不起作用。我的 javascript 不是最强的，所以我希望有人能给我一点帮助。谢谢。

<div class="form-horizontal" data-ng-repeat="item in schedule.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="[pickChosen == 1 ? 'btn-success' : 'btn-default']"
                    data-ng-click="pickChosen = buttonToggle(1);">
            </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 = buttonToggle(2);">
            </button>
        </div>
    </div>
</div>

Angular 代码:

.controller('dashController', function ($scope, $http) { 
    $scope.buttonToggle = function(buttonNumber) {
        if (pickChosen == 0) {
            pickChosen = buttonNumber;
        } else {
            pickChosen = 0;
        }
    }
})

Answer 1

您的代码几乎没问题。只是一件小事。对于 ngClick 删除分配部分，它应该看起来只是:

data-ng-click="buttonToggle(1);"

然后在 Controller 中使用this关键字引用当前作用域pickChosen:

$scope.buttonToggle = function(buttonNumber) {
    this.pickChosen = buttonNumber === this.pickChosen ? 0 : buttonNumber;
}

演示:http://plnkr.co/edit/JyoBvFOcT9sQYIJVIJyn