如果所有复选框都被选中，则全选，angular js

Question

在我的页面上，我有 angular ui 手风琴，在每个面板内，我正在渲染带有项目和复选框的列表，还有复选框“全选”。 对于选择方法和逻辑，我使用了this resource。在这个资源逻辑中似乎工作，但是我把这个逻辑放到我的代码中，它停止工作。

我想要实现的是，当所有复选框都被选中时，复选框“全选”已被自动选中，如果某些复选框未被选中，复选框“全选”也必须被取消选中。

我尝试了here、here、here 提供的多个建议，但最终我得到了相同的结果。

如果有人可以帮助我解决我的问题，我将不胜感激。

 $scope.categories = [
{
  id: 1,
  name: "category 1"
},
 {
  id: 2,
  name: "category 2"
},
 {
  id: 3,
  name: "category 3"
}
]

               $scope.selectedAll = false;
                $scope.selectAll = function(array) {
                    $scope.selectedAll = !$scope.selectedAll;
                    angular.forEach(array, function(item) {
                        item.Selected = $scope.selectedAll;
                    });
                };

                $scope.checkIfAllSelected = function(array) {
                    $scope.selectedAll = array.every(function(item) {
                        return item.Selected == true
                    })
                };

html

<div>
<div class="row" ng-class="{'selected': selectedAll, 'default': !selectedAll}">
    <div>Select all
        <input type="checkbox"
               ng-model="selectedAll" ng-click="selectAll(categories)" >
    </div>
</div>
<div class="row" ng-repeat="item in categories | orderBy : 'id'" ng-class="{'selected': item.selected, 'default': !item.selected}">
    <div > {{ item.name }}
        <input type="checkbox"
               ng-model="item.Selected" ng-click="checkIfAllSelected(categories)"
        >
    </div>
</div>

This is my plunker

Answer 1

请看看你的 plunker 的这个分支：https://plnkr.co/edit/OW3F1VMke9iLuNkt5p3o?p=preview

两件事：
1. 为您的视图模型创建一个对象是一个很好的做法（您可以在 plunker $scope.model 的名称模型下找到它。这将解决 2 路数据绑定问题。
2. 我已将ng-click 更改为ng-change（虽然这不是解决方案的一部分 - 我认为它更正确）。

如果您需要更多说明，请告诉我。