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

Question

我想要实现的是在选中 "master" 复选框时选中属于 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>

第一个复选框是 "master"，应该将其自己的状态强加给 "slaves"（接下来的三个复选框），无论它们之前的状态如何。

关于从属复选框，应独立选中和取消选中它们。但是三者同时查的话，高手应该也是。每当只有其中一个没有被检查时，master 应该也不行。

还有我的控制器：

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;
        }
    };
});

Answer 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 还没有得到足够的支持，公平地说，它有点笨重） - 奇怪的是这还没有用。

Answer 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 被绑定到一个字符串列表。您应该知道，当在集合上重复时，每个项目都会有自己的范围并独立维护它们的值。这很难做到，因为您不能将这些值添加到字符串中（您需要绑定到可以扩展的对象）。

我已针对此特定设置进行了调整。稍作改动应该可以接受。

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

Select all the checkboxes inside the same loop iteration using AngularJS

javascript

checkbox

angularjs