Angular.js'de alt onay kutularına göre ebeveyn onay kutusu nasıl seçilir?

Question

Son zamanlarda Angular.js ile oynuyordum ve ng-model ve ng-checked yönergelerini kullanarak yaptım ebeveyn onay kutusu işaretlendiğinde tüm onay kutularını işaretlemeye karar verdim.

<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> 

Şimdi, tüm onay kutularını işaretledikten sonra bazı sorunları işaretledikten sonra tüm üst onay kutusunu işaretlemeye çalışıyorum.

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/

yukarıda kod daha sağlam yapabilir miyim?

Answer 1

Onay kutusundaki ng işaretli öznitelik bir ifadeyi alır. Dolayısıyla, bir ifadeye dayalı olarak kontrol edilmesini sağlamak için aşağıda belirtildiği gibi ve/veya koşullarla bir ifade verebilirsiniz.

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

Her çocuğun onay kutusu tıklandığında hesaplaması yapmak seprate işlevi yazmak zorunda değilsin.

Here is example in jsfiddle

Answer 2

Görme o ng seçilmiş olan kontrol tüm onay kutularını günceller, ama aslında verilerini göndermek için gittiğinizde sonra veri seçildi şeylerden geri uyuşmuyor. Ben berbat bir ng-click() yapmayı öneririm, ancak verileriniz dinamikse.

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>