如何選擇基於angular.js中的子複選框的父複選框？

我一直在玩Angular.js，並決定檢查所有複選框，一旦父複選框被選中，我已經使用ng-model和ng-checked指令。如何選擇基於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>

現在我想要選擇所有父複選框，一旦所有的孩子複選框被選中，但遇到了一些問題。

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

演示：http://jsfiddle.net/codef0rmer/QekpX/

，我們可以使上面的代碼更穩健？

來源

2012-08-27 codef0rmer

你有什麼期望，一旦你取消任何複選框的發生？ –

我已經添加了上面的演示鏈接。一旦我檢查父複選框，它會檢查所有的子複選框。但是，當我取消選中某個選中的子複選框時，它應該取消選中父項複選框。 – codef0rmer

像所有的複選框應該同步？ –

複選框中的ng-checked屬性需要一個表達式。所以你可以給出一個表達式和/或條件，如下所述，以便根據表達式進行檢查。

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

你不必寫一個seprate函數來完成計算點擊每個孩子複選框時。

Here is example in jsfiddle

來源

2012-08-27 15:13:08 manoj

就像一個魅力.. :-) – codef0rmer

哇。 ..非常簡單的解決方案。謝謝！ – incutonez

在官方文檔中，您可以看到，angular建議不要一起使用ng-checking和ng-model https://docs.angularjs.org/api/ng/directive/ngChecked – iarroyo

視覺上更新與NG-選擇檢查所有複選框，但是當你去實際提交數據的數據不被選擇的內容相匹配。我建議做一個ng-click（），但如果你的數據是動態的。

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>

來源

2015-05-21 20:32:46 Stirling

如何選擇基於angular.js中的子複選框的父複選框？

回答

相關問題