选择ng-repeat中的所有复选框

Question

我在ng-repeat中有一个复选框列表:

  <div ng-repeat="item in results">
      <label class="inlinelabel checkbox">
        <input type="checkbox" ng-model="selected[item.id]"><i></i>
      </label>
</div>

我想在点击ng-repeat之外的单个复选框时选中所有复选框.

   <label> Select All </label>
<input type="checkbox" data-ng-model="selectedAll" ng-click="checkAll()">

我在控制器中尝试了代码,但它不起作用.

   $scope.checkAll=()=>{
                if ($scope.selectedAll) {
                    $scope.selectedAll = true;
                } else {
                    $scope.selectedAll = false;
                }
                angular.forEach($scope.employees,function (selected) {
                    selected[selected.id] = $scope.selectedAll;
                });
            }

Answer 1

这里的其他答案确实使所有复选框都"选中",但我认为这个想法是让底层模型也发生变化,这些答案无法做到.

这是因为Angular在ng-checked更改时不会更改模型.相反,"全选"的正确方法是更改​​模型 - 而视图就是如下.

<button ng-click="selectAll()">select all</button>
<div ng-repeat="item in items">
  <label>
    {{item.n}}:
    <input type="checkbox" ng-model="selected[item.id]">
  </label>
</div>

和控制器,只需将所有项目要true在selected:

$scope.selected = {};
$scope.selectAll = function(){
  for (var i = 0; i < $scope.items.length; i++) {
    var item = $scope.items[i];

    $scope.selected[item.id] = true;
  }
};

plunker

ViewModel"驱动"视图(除了ng-model允许View更改ViewModel 的双向指令,通常基于用户交互),所以每当你想要改变某些东西时,首先要问自己"如何我希望ViewModel看起来像",而不是View应该如何看待.View将遵循ViewModel.