2012-08-27 17 views
5

Grałem ostatnio z Angular.js i postanowiłem zaznaczyć wszystkie pola wyboru, gdy zaznaczono pole wyboru dla rodzica, co zrobiłem przy użyciu dyrektyw ng-model i ng-checked.Jak zaznaczyć pole wyboru dla rodzica na podstawie pól podrzędnych w pliku angular.js?

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

Teraz próbuję zaznaczyć zaznaczenie pola wyboru nadrzędnego, gdy wszystkie pola wyboru podrzędnych są zaznaczone, ale występują pewne problemy.

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/

możemy uczynić powyższy kod bardziej wytrzymałe?

+0

Czego spodziewać się zdarzyć raz odznaczyć którykolwiek z wyboru? –

+0

Dodałem link pokazowy powyżej. Gdy zaznaczę pole wyboru nadrzędny, sprawdza wszystkie pola wyboru podrzędne. Ale kiedy odznaczę jedno z zaznaczonych pól podrzędnych, powinno ono odznaczyć także nadrzędne. – codef0rmer

+0

Czy wszystkie pola wyboru powinny być zsynchronizowane? –

Odpowiedz

6

Atrybut ng-checked w polu wyboru przyjmuje wyrażenie. Możesz więc wyrazić wyrażenie i/lub warunki, jak wspomniano poniżej, aby sprawdzić je na podstawie wyrażenia.

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

Nie trzeba pisać funkcji seprate, aby wykonać obliczenia po kliknięciu pola wyboru każdego dziecka.

Here is example in jsfiddle

+0

pracował jak urok .. :-) – codef0rmer

+0

Wow. ... niezwykle łatwe rozwiązanie. Dzięki! – incutonez

+0

W oficjalnej dokumentacji można zobaczyć, że kątowe radzą nie używać sprawdzania ng razem z modelem ng https://docs.angularjs.org/api/ng/directive/ngChecked – iarroyo

0

Wizualnie aktualizuje to wszystkie pola zaznaczone z ng-wybrany, ale wtedy, gdy idziesz do faktycznie przekazują dane dane nie zgadza się z tym, co zostało zaznaczone. Sugeruję wykonanie ng-click(), które jest do bani, ale jeśli twoje dane są dynamiczne.

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> 
Powiązane problemy