AngularJS主复选框切换器

Question

Is it possible with AngularJs to do: master checkbox which turn on/off it child checkboxes - each one of them showing a different content. Plunker enter code here

Answer 1

Yes, you can create a master checkbox toggle. Here's a working plunkr .

View

<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
<input type="checkbox" ng-model="checkbox[0].selected" />
<input type="checkbox" ng-model="checkbox[1].selected" />
<input type="checkbox" ng-model="checkbox[2].selected" />

Controller

// Check/uncheck all boxes
$scope.checkAll = function () {
  angular.forEach($scope.checkbox, function (obj) {
    obj.selected = $scope.selectAll;
  });
};

Answer 2

add the model to the 'ng-checked' expression

  <input id="checkSlave" type="checkbox" ng-checked="master || slave1" ng-model="slave1" aria-label="Slave input">
  <input id="checkSlave" type="checkbox" ng-checked="master || slave2" ng-model="slave2" aria-label="Slave input">
  <input id="checkSlave" type="checkbox" ng-checked="master || slave3" ng-model="slave3" aria-label="Slave input">

add 'master' into ng-show expression

<div ng-show="slave1 || master">Slave one showed!</div>
<div ng-show="slave2 || master">Slave two showed!</div>
<div ng-show="slave3 || master">Slave three showed!</div>