在我的情况下如何检查所有复选框？答案

【问题标题】：How to check all checkbox in my case?在我的情况下如何检查所有复选框？
【发布时间】：2014-08-21 11:15:32
【问题描述】：

我正在尝试以 Angular 的方式检查所有 checkboxes。

我有以下代码：

 <div>
     <div class="checkbox">
          <input ng-click="checkAll =! checkAll" type="checkbox"/> check all
     </div>
     <div class="checkbox" ng-repeat="item in items">
          <input type="checkbox" ng-model="checkAll"/> {{item.title}}
     </div>
</div>

当我单击check all 时，我能够检查所有checkboxes，但是，如果我检查并取消选中个人checkbox，check all 似乎不再应用那个个人checkbox。谁能帮我解决这个问题？非常感谢！

【问题讨论】：

见:: stackoverflow.com/questions/12648466/…

标签： javascript html angularjs

【解决方案1】：

修改后的答案：

使用directive 的另一个答案的替代方法：

app.directive('myCheckBox', function(){
  return {
    restrict: 'E',
    scope: {
      checkAll: '=',
    },
    template: '<input check-all="checkAll" type="checkbox" ng-model="check"/>',
    replace: true,
    link: function(scope) {
      scope.$watch('checkAll', function(newVal){
        scope.check = newVal;
      })
    },

  }
})

我将父作用域的checkAll 传递给新指令的作用域，并为它添加了一个观察者。

plunker

旧答案：

您可以使用$parent（将访问作用域的父作用域）：

<input type="checkbox" ng-model="$parent.checkAll"/> {{item.title}}

plunker

您也应该将checkAll 作为主复选框的ng-model，而不是作为点击事件。

您遇到的问题是由于ngRepeat 为每次重复创建了一个范围。

【讨论】：

您的演示不起作用。每个复选框都做同样的事情（选择/取消选择所有复选框）。只有“全选”才能选中所有复选框。 a、b 和 c 应该独立工作。
@Jerrad 认为这就是他想要的，现在我发现我看错了。就可以了。

【解决方案2】：

您没有展示您的$scope.items 的样子。如果它是一个基元数组，那么这是一个问题。 ng-repeat 将为从父范围继承的每个项目创建一个新范围。问题是对于原语，它只是复制了一个值，而你失去了双向绑定。相反，让您的项目成为一个对象数组，如下所示：

$scope.items = [
  {name: 'a', checked: false}, 
  {name: 'b', checked: false}, 
  {name: 'c', checked: false}
];

您还应该为“全选”复选框设置一个单独的变量。

$scope.checkAll = false;

现在创建一个函数来遍历所有项目并设置checked 属性：

$scope.checkAllBoxes = function(){
    $scope.checkAll = !$scope.checkAll;
    angular.forEach($scope.items, function(item){
      item.checked = $scope.checkAll;
    })
}

这样绑定：

<div class="checkbox">
      <input type="checkbox" ng-click="checkAllBoxes()" /> check all
</div>
<div class="checkbox" ng-repeat="item in items">
      <input type="checkbox" ng-model="item.checked"/> {{item.name}}
</div>

Demo

【讨论】：