Question

我有一个复选框列表，其中一个复选框的值为ALL。每当选中ALL时，复选框的其他选项将被禁用并取消选中（值为空）。我应该如何在AngularJS中做到这一点？通过在数据列表上使用循环生成复选框列表，如下所示：

<div ng-repeat="item in moduleService.elements">
    <input type="checkbox">{{item.value}}
</div>

Answer 1

你可以这样做：

HTML：

<div ng-repeat="item in moduleService.elements">
    <input id="{{'checkbox' + $index}}" type="checkbox" ng-disabled="allChecked" ng-model="item.isChecked">
    <label for="{{'checkbox' + $index}}">{{item.value}}</label>
</div>
<div>
    <input id="allCheckbox" type="checkbox" ng-model="allChecked" ng-click="onAllClicked()">
    <label for="allCheckbox">All</label>
</div>

控制器：

var myCtrl = function(moduleService, $scope) {
    $scope.onAllClicked = function() {
        if(!$scope.allChecked) {
            for (var i = 0; i < moduleService.elements.length; i++) {
                moduleService.elements[i].isChecked = false;
            }
        }
    }
}

这是一个带有类似代码的JSFiddle：http://jsfiddle.net/robianmcd/W3xeP/

Answer 2

你可以使用ng-checked，它会让它变得性感。

<input type="checkbox" id="masterCheckbox" ng-model="master">

<div ng-repeat="item in moduleService.elements">
    <input type="checkbox" ng-checked="master">{{item.value}}
</div>

美观，简单，干净。查看JSFiddle

Answer 3

你还需要使用Zack的答案来禁用ng

<input type="checkbox" id="masterCheckbox" ng-model="master">

<div ng-repeat="item in moduleService.elements">
    <input type="checkbox" ng-disabled="master" ng-checked="master">{{item.value}}
</div>

AngularJS的独家选项

3 个答案: