Come selezionare la casella di controllo genitore in base alle caselle di controllo figlio in angular.js?

Question

Recentemente ho iniziato a giocare con Angular.js e ho deciso di spuntare tutte le caselle di controllo una volta verificata la casella di controllo genitore, cosa che ho fatto usando le direttive ng-model e ng-checked.

<div ng-app> 
     <div ng-controller="Ctrl"> 
      <input type="checkbox" ng-model="parent"/> Select All<br/> 
      <input type="checkbox" ng-model="child_1" ng-checked="parent" ng-click="getAllSelected()"/> First<br/> 
      <input type="checkbox" ng-model="child_2" ng-checked="parent" ng-click="getAllSelected()"/> Second<br/> 
      <input type="checkbox" ng-model="child_3" ng-checked="parent" ng-click="getAllSelected()"/> Three<br/> 
      <input type="checkbox" ng-model="child_4" ng-checked="parent" ng-click="getAllSelected()"/> Four<br/> 
      <input type="checkbox" ng-model="child_5" ng-checked="parent" ng-click="getAllSelected()"/> Five<br/> 
     </div> 
    </div> 

Ora sto cercando di selezionare tutto la casella di controllo genitore una volta tutte le caselle di controllo figlio vengono controllati, ma di fronte a qualche problema.

function Ctrl($scope) { 
     $scope.getAllSelected = function() { 
      var chkChild = document.querySelectorAll('input[ng-model^="child_"]').length; 
      var chkChildChecked = document.querySelectorAll('input[ng-model^="child_"]:checked').length; 
      if (chkChild === chkChildChecked) $scope.parent= true; 
      else $scope.parent= false; 
     } 
    } 

Demo: http://jsfiddle.net/codef0rmer/QekpX/

Possiamo rendere il codice di cui sopra più robusto?

Answer 1

L'attributo ng-checked nella casella di controllo contiene un'espressione. In questo modo puoi esprimere un'espressione con e/o condizioni, come indicato di seguito, per verificarla in base a un'espressione.

<input type="checkbox" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"/> Select All<br/> 

Non dovete scrivere una funzione seprate di fare il calcolo in cui ogni casella bambino viene cliccato.

Here is example in jsfiddle

Answer 2

Visivamente aggiorna tutte le caselle di controllo sono stati controllati con selezionato ng-, ma poi quando si va a inviare effettivamente i dati i dati non corrisponde con quello che è stato selezionato. Suggerisco di fare un ng-click() che fa schifo, ma se i tuoi dati sono dinamici.

http://codepen.io/stirlingw/pen/gpwXWM

//Random JSON object 
$scope.labels = 
    [{ 
    label: 'Death Row Records', 
    selected: false, 
    artists: [ 
     {artist: 'MC Hammer', selected: false}, 
     {artist: 'Andre "Dr. Dre" Young', selected: false}, 
     {artist: 'Snoop Dogg', selected: false}, 
     {artist: 'Tupac Shakur', selected: false}, 
     {artist: 'Nate Dogg', selected: false}, 
    ] 
}]; 

//JS 
$scope.clicker = function(label){ 
    label.artists.forEach(function(e){ 
    e.selected = !label.selected; 
    }); 
}; 

//html 
<ul> 
    <li ng-repeat="label in labels"> <input type="checkbox" ng-model="label.selected" ng-click="clicker(label)"> {{label.label}} 
     <ul> 
      <li ng-repeat="artist in label.artists"> 
       <input type="checkbox" ng-model="artist.selected" > {{artist.artist}} 
      </li> 
     </ul> 
    </li> 
</ul>