What I'm trying to achieve is to check some checkboxes belonging to a ng-repeat
loop iteration when I check a "master" checkbox. My code so far in the view:
<div ng-app="CheckAllModule">
<div ng-controller="checkboxController">
<ul ng-repeat="s in struct">
<li><strong>{{s}} item</strong>
<input type="checkbox" ng-checked="x1 && x2 && x3" ng-model="selectedAll" ng-click="checkAll()" />
</li>
<label>Subitem A
<input type="checkbox" ng-checked="chk" ng-model="x1" />
</label>
<label>Subitem B
<input type="checkbox" ng-checked="chk" ng-model="x2" />
</label>
<label>Subitem C
<input type="checkbox" ng-checked="chk" ng-model="x3" />
</label>
</ul>
</div>
</div>
Where the first checkbox is the "master" and should impose its own state to the "slaves" (the next three checkboxes), no matter what was their previous state.
Regarding to the slave checkboxes, they should be checked & unchecked indepently. But If the three are checked at the same time, the master should be too. Whenever only one of them is not checked, the master shouldn't be as well.
And my controller:
var app = angular.module("CheckAllModule", []);
app.controller("checkboxController", function ($scope) {
$scope.struct = ['First', 'Second'];
$scope.checkAll = function () {
if ($scope.selectedAll) {
$scope.chk = true;
} else {
$scope.chk = false;
}
};
});
Any help? Thx!
Aucun commentaire:
Enregistrer un commentaire