使用 AngularJS 选择同一循环迭代中的所有复选框答案

【问题标题】：Select all the checkboxes inside the same loop iteration using AngularJS使用 AngularJS 选择同一循环迭代中的所有复选框
【发布时间】：2015-05-01 00:22:05
【问题描述】：

当我检查“主”复选框时，我想要实现的是检查属于 ng-repeat 循环迭代的一些复选框。到目前为止我的代码在视图中：

<div ng-app="CheckAllModule">
    <div ng-controller="checkboxController">
        <ul ng-repeat="s in struct">
            <li><strong>{{s}} item</strong>
                <input type="checkbox" ng-checked="x1 && x2 && x3" ng-model="selectedAll" ng-click="checkAll()" />
            </li>
            <label>Subitem A
                <input type="checkbox" ng-checked="chk" ng-model="x1" />
            </label>
            <label>Subitem B
                <input type="checkbox" ng-checked="chk" ng-model="x2" />
            </label>
            <label>Subitem C
                <input type="checkbox" ng-checked="chk" ng-model="x3" />
            </label>
        </ul>
    </div>
</div>

第一个复选框是“主人”，应该将自己的状态强加给“奴隶”（接下来的三个复选框），无论它们之前的状态是什么。

关于从属复选框，它们应该被单独选中和取消选中。但是如果三者同时查的话，高手应该也是。每当只检查其中一个时，主人不应该也是如此。

还有我的控制器：

var app = angular.module("CheckAllModule", []);
app.controller("checkboxController", function ($scope) {
    $scope.struct = ['First', 'Second'];
    $scope.checkAll = function () {
        if ($scope.selectedAll) {
            $scope.chk = true;
        } else {
            $scope.chk = false;
        }
    };
});

【问题讨论】：

标签： javascript angularjs checkbox

【解决方案1】：

这几乎可以肯定不遵循最佳实践，但我是 Angular 的菜鸟。但它确实有效：

http://plnkr.co/edit/oGNC3ZUZHDHrBrMyRKjW?p=preview

var app = angular.module("CheckAllModule", []);
app.controller("checkboxController", function($scope) {
  $scope.struct = ['First', 'Second'];
  $scope.checkAll = function(selected, chkArray) {
    for (var chk in chkArray) {
      chkArray[chk] = selected
    }
  };
});

我对您的 html 进行了一些调整以使其正常工作：

<div ng-app="CheckAllModule">
  <div ng-controller="checkboxController">
    <ul ng-repeat="s in struct" data-ng-init="x[1]=false;x[2]=false;x[3]=false">
      <li>
        <strong>{{s}} item</strong>
        <input type="checkbox" ng-checked="x[1] && x[2] && x[3]" ng-model="selectedAll" ng-click="checkAll(selectedAll, x)" />
      </li>
      <label>Subitem A
        <input type="checkbox" ng-model="x[1]" />
      </label>
      <label>Subitem B
        <input type="checkbox" ng-model="x[2]" />
      </label>
      <label>Subitem C
        <input type="checkbox" ng-model="x[3]" />
      </label>
    </ul>
  </div>
</div>

更新

我在考虑如何更好地测试x1 && x2 && x3 转换为数组是第一步，但你可以这样做：

x.indexOf(false)

（理想情况下，您会使用 .reduce(function(a,b) { return a && b; })，但 reduce 还没有得到足够好的支持，而且公平地说，它有点笨拙） - 奇怪的是这还没有工作。

【讨论】：

@luisddm 很高兴听到它，KreepN 使用点符号的注释（下）值得关注。

【解决方案2】：

Working Plunkr Here

请注意，您应该始终尝试使用点表示法绑定到某些东西。

<ul ng-repeat="s in struct track by $index">
      <li>
        <strong>{{s.Item}} item</strong>
        <input type="checkbox" ng-click="checkAll(s.selectedAll,$index)" ng-model="s.selectedAll" ng-checked="s.x1 && s.x2 && s.x3" />
      </li>
      <label>Subitem A
        <input type="checkbox" ng-checked="s.chk" ng-model="s.x1" />
      </label>
      <label>Subitem B
        <input type="checkbox" ng-checked="s.chk" ng-model="s.x2" />
      </label>
      <label>Subitem C
        <input type="checkbox" ng-checked="s.chk" ng-model="s.x3" />
      </label>
    </ul>

这里的情况是你 ng-repeat 绑定到一个字符串列表。您应该知道，在对集合重复时，每个项目都会有自己的范围并独立维护它们的值。这很难做到，因为您不能将这些值添加到字符串中（您需要绑定到可以展开的对象）。

我已进行了允许此特定设置的调整。这应该是可以接受的，因为已经进行了细微的更改。

【讨论】：