Select AngularJS 中的所有复选框

Question

我有一个 select 所有复选框和列表复选框，就像这样。

复选框列表从

接收数据

$scope.contacts = [
        {"name": "Bambizo", "check": false},
        {"name": "Jimmy", "check": false},
        {"name": "Tommy", "check": false},
        {"name": "Nicky", "check": false}
];

我希望当我选中 Select 所有复选框时，它会选中或取消选中下面列表中的所有复选框。这是我的代码：

Select 所有复选框：

<input type="checkbox" ng-model="checkAllContact" ng-change="checkAllContact(checkAllContact)">

checkAllContact 函数：

$scope.checkAllContact = function(){
        var allChecked = false;
        for(i = 0; i< $scope.contacts.length; i++){
            if ($scope.contacts[i].check == true){
                allChecked = true;
            }else {
                allChecked = false;
            }
        }

        if (allChecked = true){
            for(i = 0; i< $scope.contacts.length; i++){
                $scope.contacts[i].check = false;
            }
        }else{
            for(i = 0; i< $scope.contacts.length; i++){
                $scope.contacts[i].check = true;
            }    
        }
    }

但是当我运行并单击 Select 全部复选框时。它会出错：

怎么解决的或者有什么办法吗？谢谢

Answer 1

ng-model="checkAllContact" & 方法 checkAllContact 同名。

checkAllContact 范围变量被 checkAllContact 覆盖。

您需要更改函数名称才能解决此问题。

Answer 2

你的函数名和变量名(ng-model)一样，换一个吧

你也可以用更简单的方式来做，例如

HTML:

 <input type="checkbox" ng-model="checkAllContact1" ng-change="checkAllContact()">
 <div ng-repeat="item in contacts">
     <input type="checkbox" ng-model="item.check"/>
 </div>

JS:

$scope.checkAllContact = function(){
    if ($scope.checkAllContact1) {
        $scope.checkAllContact1 = true;
    } else {
        $scope.checkAllContact1 = false;
    }
    angular.forEach($scope.contacts, function (item) {
        item.check = $scope.checkAllContact1;
    });
}

看例子Fiddle

Select AngularJS 中的所有复选框

Select All Checkbox in AngularJS

javascript

angularjs

checkbox

angularjs-ng-change