在按钮上切换类(选择/取消选择）

Toggling the class on a button (select/deselect)

本文关键字：选择 取消 按钮      更新时间：2023-09-26

我使用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;
        }
    }
})

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

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

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

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

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

您需要将pickChosen更改为$scope.pickChosen。此外，您的ng类应该是：

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

如果这两个都不起作用，请对你的问题进行处理，这样更容易回答。

看起来您也在使用Bootstrap。使用Button组并让Bootstrap处理类怎么样？或者，使用Angular UI和Radio按钮。

相关文章：