Question

我正试图以角度方式检查所有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>

点击checkboxes后，我可以检查所有check all，但是，如果我选中并取消选中checkbox个人，check all似乎没有再申请个人checkbox。有人可以帮我解决这个问题吗？非常感谢！

Answer 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为每次重复创建了一个范围。

Answer 2

您没有显示$scope.items的样子。如果它是一个基元数组，那么这就是一个问题。 ng-repeat将为从父作用域继承的每个项创建一个新作用域。问题是，对于原语，它只是复制了值，并且您丢失了双向绑定。相反，将您的项目设为一个对象数组，如下所示：

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

您还应该为＆＃34;全部检查＆＃34;复选框。

$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

如何检查我案例中的所有复选框？

2 个答案: