选中/取消所有复选框 - AngularJS ng-repeat

Question

我有一个结构长这样：http://jsfiddle.net/deeptechtons/TKVH6/。

<div>
<ul ng-controller="checkboxController">
    <li>Check All
        <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
    </li>
    <li ng-repeat="item in Items">
        <label>{{item.Name}}
            <input type="checkbox" ng-model="item.Selected" />
        </label>
    </li>
</ul>
</div>

angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {


$scope.Items = [{
    Name: "Item one"
}, {
    Name: "Item two"
}, {
    Name: "Item three"
}];
$scope.checkAll = function () {
    if ($scope.selectedAll) {
        $scope.selectedAll = true;
    } else {
        $scope.selectedAll = false;
    }
    angular.forEach($scope.Items, function (item) {
        item.Selected = $scope.selectedAll;
    });

};


});

当选择或取消选择“全选”时，所有其他复选框都被选中。但是当我选择“全选”，然后取消其中一个项目时，我希望“全选”也被取消选择。

提前感谢！

（附注：感谢deeptechtons提供JSFiddle）

- Ramya

---

谁给这个问题点了踩，能否告诉我原因？对未来会有帮助。谢谢！ - Ramya

Answer 1

如果你正在使用Angular 1.3+，你可以使用ng-model-options中的getterSetter来解决这个问题，并避免手动跟踪allSelected状态。

HTML:

<input type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>

JS:

var getAllSelected = function () {
    var selectedItems = $scope.Items.filter(function (item) {
        return item.Selected;
    });

    return selectedItems.length === $scope.Items.length;
}

var setAllSelected = function (value) {
    angular.forEach($scope.Items, function (item) {
        item.Selected = value;
    });
}

$scope.allSelected = function (value) {
    if (value !== undefined) {
        return setAllSelected(value);
    } else {
        return getAllSelected();
    }
}

http://jsfiddle.net/2jm6x4co/

- rob

Answer 2

每当复选框发生变化时，您可以使用此函数来检查是否已选择所有记录：

$scope.checkStatus= function() {
            var checkCount = 0;
            angular.forEach($scope.Items, function(item) {
                 if(item.Selected) checkCount++;
            });
                $scope.selectedAll = ( checkCount === $scope.Items.length);
        };

视图代码：

<input type="checkbox" ng-model="item.Selected" ng-change="checkStatus();"/>

http://jsfiddle.net/TKVH6/840/

- Kmart2k1

---

抱歉，我本来想编辑我的链接，但不小心编辑了你的链接。我是否已将其恢复为正确的jsFiddle链接？ - rob

Answer 3

工作示例：http://jsfiddle.net/egrendon/TKVH6/845/

视图：

<input type="checkbox" ng-model="item.Selected" ng-click="setCheckAll(item)" />

控制器：

angular.module("CheckAllModule", [])
    .controller("checkboxController", function checkboxController($scope) {


    $scope.Items = [{
        Name: "Item one"
    }, {
        Name: "Item two"
    }, {
        Name: "Item three"
    }];
    $scope.checkAll = function () {
        if ($scope.selectedAll) {
            $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach($scope.Items, function (item) {
            item.Selected = $scope.selectedAll;
        });

    };

    $scope.setCheckAll = function (item) {
        //
        // Check if checkAll should be unchecked
        //
        if ($scope.selectedAll && !item.Selected) {
            $scope.selectedAll = false;
        } 
        //
        // Check if all are checked.
        //
        var checkCount = 0;
        angular.forEach($scope.Items, function(item) {
            if(item.Selected) checkCount++;
        });
        $scope.selectedAll = ( checkCount === $scope.Items.length);
    };

});

- Ernesto Rendon

Answer 4

这是一个简洁的方法

http://jsfiddle.net/TKVH6/850/

使用一点下划线（只是减少）和 ng-checked

  <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" ng-checked="allSelected()"/>


   $scope.allSelected = function () {
      var allSelect = _.reduce($scope.Items, function (memo, todo) {
          return memo + (todo.Selected ? 1 : 0);
        }, 0);
      return (allSelect === $scope.Items.length);
  };

如果你不想使用 underscore，你可以使用 JavaScript 内置的 .reduce。

- ajmajmajma

Answer 5

这个答案的逻辑与Kmart2k1的答案相似。它将更新主复选框的责任放在ng-repeat中的每个子元素上。我使用array.some而不是array.forEach来更快地检查是否有任何未选择的项目。

HTML：

<li ng-repeat="item in Items">
    <label>{{item.Name}}
        <input type="checkbox" ng-model="item.Selected" ng-change="notifyMaster()"/>
    </label>
</li>

JavaScript

$scope.notifyMaster = function () {
    $scope.selectedAll = !$scope.Items.some(function (item) {
       return !item.Selected;  //check if ANY are unchecked
    });
}

分叉的小提琴

- ryanyuyu