如果選中所有復選框，則全選，角度js

Question

在我的頁面上，我有角ui手風琴，在每個面板內，我正在渲染包含項目和復選框的列表，也有復選框“全選”。 對於選擇方法和邏輯，我使用了此資源 。 在這種資源邏輯中，邏輯似乎有效，但是我在代碼中使用了該邏輯，但邏輯卻停止了。

我要實現的是選中所有復選框后，自動選中了“全選”復選框，如果未選中某些復選框，則也必須同時取消選中“全選”復選框。

我嘗試了這里 ， 這里 ， 這里提供的多個建議，但最終我得到了相同的結果。

我很高興有人可以幫助我解決我的問題。

 $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>

這是我的朋克

Answer 1

請看一下您的pl夫的這個叉子： https ://plnkr.co/edit/OW3F1VMke9iLuNkt5p3o ? p = preview

兩件事情：
1.為視圖模型創建一個對象是一個好習慣（您可以在plunker $scope.model的名稱模型下找到它。這將解決2種方式的數據綁定問題。
2.我已將ng-click ng-change為ng-change （盡管這不是解決方案的一部分-我認為它更正確）。

如果您需要更多說明，請告訴我。