选中 AngularJS 中的所有复选框答案

【问题标题】：Check all check boxes in AngularJS选中 AngularJS 中的所有复选框
【发布时间】：2015-12-11 13:15:12
【问题描述】：

我是 AngularJS 的新手。请看这个：

现在当用户点击“All”链接时，所有11个复选框都应该被选中，当用户点击“None”链接时，所有11个复选框应该取消选中。

另外，当用户选中所有其他复选框时，应选中所有底部9个复选框，当用户取消选中所有其他复选框，所有底部的 9 个复选框都应取消选中。

我能够一次完成一项任务，但不能同时完成。那么，有人可以帮我同时完成这两项任务吗？

任何帮助将不胜感激。

【问题讨论】：

如果有人能给我 plucker 或 jsfiddle 演示会很好，它具有我的确切功能，即检查复选框的两种方式
如果你能分享你的尝试就更好了！
这里只有 9 个复选框。另外两个复选框在哪里？也请发送您的代码...

标签： angularjs checkbox

【解决方案1】：

<md-checkbox ng-click="checked = !checked; check = {}"></md-checkbox>
<div ng-repeat="item in [1,2,3,4,5]">
    <md-checkbox ng-checked="checked || check[item]" ng-click="check[item] = !check[item]" ng-model="sel[item]"></md-checkbox>
</div>

【讨论】：

欢迎来到 StackOverflow。虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的答案添加解释并说明适用的限制和假设。

【解决方案2】：

你可以使用

HTML

<body ng-controller="MainCtrl">
    <button ng-click="selectAll()">Select All</button>
    <button ng-click="clearAll()">Clear All</button>
    <input type="checkbox" ng-model="select" ng-click="checkAll()" />
    <br />

    <p>Checkboxes</p>
    <input type="checkbox" ng-repeat="c in checkbox" ng-model="checkbox[$index].selected">
</body>

角度

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.checkbox = [
    {
      selected: false
    },
    {
      selected: false
    },
    {
      selected: false
    }
  ];
  // Check/uncheck all boxes
  $scope.selectAll = function () {
    $scope.select = true;
    angular.forEach($scope.checkbox, function (obj) {
        obj.selected = true;
    });
  };

  $scope.clearAll = function () {
    $scope.select = false;
    angular.forEach($scope.checkbox, function (obj) {
        obj.selected = false;
    });
  };

  $scope.checkAll = function () {
    angular.forEach($scope.checkbox, function (obj) {
        obj.selected = $scope.select;
    });
  };
});

参考fiddle

【讨论】：

非常感谢您的回答和详细的代码解释。现在唯一的问题是我的复选框位于手风琴内，这对您的解决方案产生了影响。 stackoverflow.com/questions/32604689/…知道如何解决这个问题吗？
Sahil Gupta，您更新的小提琴中存在一个问题：首先选中主复选框（在清除所有按钮旁边），然后取消选中底部复选框行中的任何 2-3 个复选框，现在单击在全选时，它不会选中您刚刚未选中的那些复选框。知道如何解决吗？
@ParthVora ：是的，这是一个问题，因为根据角度文档，“ng-checked”指令不应与“ngModel”一起使用。这是因为 ng-checked 需要一个表达式，所以说 ng-checked="true" 表示默认情况下总是选中复选框。
我也误解了。删除更新的答案。对不起，同样。最好的方法是使用第一个解决方案。

【解决方案3】：

HTML

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

jQuery

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

【讨论】：

【解决方案4】：

你可以使用ng-Checked 它让你更轻松

参考ng-Checked

【讨论】：

ng-checked 只是设置一个布尔值而不是设置 ng-model 的值