在按钮上切换班级（选择/取消选择）

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>

角度代码：

.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);"

然后在控制器中使用pickChosen关键字引用当前范围this：

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

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

Answer 2

您需要将pickChosen更改为$ scope.pickChosen。你的ng-class应该是这样的：

{ 'btn-success': pickChosen == 1, : 'btn-default': pickChosen != 1 }

{ 'btn-success': pickChosen == 2, : 'btn-default': pickChosen != 2 }

如果这些都不起作用，请为您的问题创建一个小提琴，以便更容易回答。

Answer 3

看起来您也在使用Bootstrap。如何使用Button group并让Bootstrap处理该类？或者，使用Angular UI和单选按钮。