Question

在我的页面上，我有角度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

请看看你的傻瓜叉子：https://plnkr.co/edit/OW3F1VMke9iLuNkt5p3o?p=preview

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

如果您需要更多说明，请与我们联系。

如果选中所有复选框，则选择全部，角度为js

1 个答案: