Выберите все флажки внутри той же итерации цикла, используя AngularJS

Question

То, что я пытаюсь сделать, это проверить некоторые флажки, принадлежащие итерации цикла , когда я устанавливаю флажок «Мастер». Мой код до сих пор в представлении:

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

Answer 1

Это почти наверняка не следовать рекомендациям, но я нуб с Угловым. Это действительно работает, хотя:

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> 

Update

Я думал о том, как лучше test 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 привязаны к списку строк. Вы должны знать, что при повторении в коллекции каждый элемент будет иметь свою собственную область действия и поддерживать свои значения независимо. Это трудно сделать, поскольку вы не можете добавить эти значения в строку (вам нужно привязать к объекту, который можно развернуть).

Я внедрил настройки, которые позволили бы выполнить эту настройку. Это должно быть приятно, поскольку были сделаны незначительные изменения.