Angularjs scope variable not updating as expected

Question

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?

you are using angularjs, why do you check it with element's id, is checked or not.You can do it with $SCOPE variables, and 2 ways binding will solve your problems — Hazarapet Tunanyan
– Hazarapet Tunanyan, Commented Apr 30, 2016 at 10:54
@ngDeveloper I got it but can you elaborate or show me some example because I'm new to angular. — Abhinav
– Abhinav, Commented Apr 30, 2016 at 11:07

MaKCbIMKo · Accepted Answer · 2016-04-30 11:48:39Z

I re-wrote your example:

html:

<div ng-controller="MyCtrl">
  Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll()" ng-model="masterCheckbox"> <br> <br>

    <div ng-repeat="checkbox in checkBoxes">
      {{checkbox.name}} : <input type="checkbox" id="slave5" ng-click="check(checkbox)" ng-model="checkbox.value" /> <br/>
    </div>
</div>

js:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.checkBoxes = [
        { name:'Slave1', value: false },
        { name:'Slave2', value: false },
        { name:'Slave3', value: false },
        { name:'Slave4', value: false },
        { name:'Slave5', value: false }
    ];

    $scope.checkAll = function() {
        angular.forEach($scope.checkBoxes, function(item){
            item.value = $scope.masterCheckbox;
        });
    };

    $scope.check = function() {
        var result = true;
        angular.forEach($scope.checkBoxes, function(item){
            if(!item.value) result = false;
        });
        $scope.masterCheckbox = result;
    };
}

jsfiddle example

Ahmed Wagdi · Accepted Answer · 2016-04-30 11:32:22Z

You're going about this the wrong way. In angular input values are stored/retrieved using ng-model, i recommend you read up on it either on the angular docs or w3schools. The basic idea is that when you set the ng-model of an input, angular itself keeps track of the input value and updates it on change (so there's no need for the id on the checkbox).

try changing your master checkbox to:

Master Checkbox : <input ng-change="selectAll(allSelected)" type="checkbox" ng-model="allSelected">

and the other checkboxes to:

Slave 1: <input ng-change="unselect()" type="checkbox" ng-model="slave.selected"></br>
/// etc.

Also i like to point out that when you have repeated checkboxes (the slave checkboxes in your example), usually you wouldn't list them all in the html, you would create an array in your controller then just use an ng-repeat to output all checkboxes. Here's a plunkr: http://plnkr.co/edit/w50WALj4Y0MtVVYX5TaV?p=preview

Hazarapet Tunanyan · Accepted Answer · 2016-04-30 11:31:12Z

<body ng-controller="MainCtrl">

Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll()"  ng-model="allChecked"> <br> <br>

Slave1 : <input type="checkbox" ng-model="checboxes['slave1']"> <br>
Slave2 : <input type="checkbox" ng-model="checboxes['slave2']"> <br>
Slave3 : <input type="checkbox" ng-model="checboxes['slave3']"> <br>
Slave4 : <input type="checkbox" ng-model="checboxes['slave4']"> <br>
Slave5 : <input type="checkbox" ng-model="checboxes['slave5']"> <br>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.checkAll = function() {
    if($scope.allChecked){
      for(var i in $scope.checkboxes){
        $scope.checkboxes[i] = true;
      }
    }
  };
});

Collectives™ on Stack Overflow

Angularjs scope variable not updating as expected

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related