Here is the Plunker Preview of the problem.
Index.html
<body ng-controller="MainCtrl">
Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll('allSelected')" ng-checked="allChecked"> <br> <br>
Slave1 : <input type="checkbox" id="slave1" ng-click="checkAll('slave1')" ng-checked="selectedAll" > <br>
Slave2 : <input type="checkbox" id="slave2" ng-click="checkAll('slave2')" ng-checked="selectedAll" > <br>
Slave3 : <input type="checkbox" id="slave3" ng-click="checkAll('slave3')" ng-checked="selectedAll" > <br>
Slave4 : <input type="checkbox" id="slave4" ng-click="checkAll('slave4')" ng-checked="selectedAll" > <br>
Slave5 : <input type="checkbox" id="slave5" ng-click="checkAll('slave5')" ng-checked="selectedAll" > <br>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.checkAll = function(id) {
// First Condition
if (id === "allSelected" && document.getElementById(id).checked) {
// $scope.selectedAll = false;
$scope.allChecked = true;
$scope.selectedAll = true;
}
// Second Condition
if (id === "allSelected" && !document.getElementById(id).checked) {
$scope.allChecked = false;
$scope.selectedAll = false;
}
// Third Condition
if (id !== "allSelected" && !document.getElementById(id).checked) {
$scope.allChecked = false;
}
};
});
See the First Condition. It is not working as expected.
I'm uploading images here for a better understanding of the problem.
Checkout the difference between first image and second image. After unchecking any of the slave checkbox, the master checkbox is getting unchecked but just after that when you click the master checkbox again(see the second image) that particular salve checkbox is still unchecked. Why?
What I'm doing here is wrong? How to make this code working as expected?
Aucun commentaire:
Enregistrer un commentaire