Check-All checkbox do not change the ng-model

Question

I used this jquery for a check-all checkbox that when clicked all of the checkboxes will be ticked:

function checkAll(e) {
    var check = $(e).is(':checked');
    if (check) {
        $('[name="row_Checkbox"]:not(:checked)').trigger('click');
    }
    else {
        $('[name="row_Checkbox"]:checked').trigger('click');
    }
}

But it has a problem, I set the angular function for ng-click of checkboxes that changing ng-model according to the some condition, and if selected checkboxes more than a number the ng-model becoming null, it is working when I click checkboxes individually but when I am using check-all checkbox that ng-model do not becoming null and still has a value!!!

I tried various solutions, but any of them has a same result.

What is going wrong???

Theophilus Omoregbee · Accepted Answer · 2018-02-26T14:01:49.437

This can be another way to handle it instead of merging both jquery and angular, simply make use of angular to do it.

The below code is going to use a field within the object to manage the model's state in the HTML like so

For example

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

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
      $scope.items = [
     {name: 'Field one', checked:false},
     {name:'Field two', checked:true},
     {name:'Field three', checked: false},
     {name: 'Field four', checked: true}
      ];
     $scope.checkall = false;
      
      $scope.toggleAll = function(checked){
       angular.forEach($scope.items, function(item){
         item.checked = checked
       });
      }
      
      // listen to when the others were clicked or not
     $scope.checkboxClicked = function (item, value){
       if(value === false){
       $scope.checkall = false
      }else{
      $scope.checkall = true
        // check the others to see if you need to make check all true or not
        angular.forEach($scope.items, function(x){
         if(x.checked !== true && x.name !== item.name){
          $scope.checkall = false
         }
       });
      }
     }
      
    });

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

     <body  ng-app="plunker">
     <div  ng-controller="MainCtrl">
        <p>Hello {{name}}!</p>
    <input type="checkbox" ng-click="toggleAll($event.target.checked)" ng-model="checkall"> Check all --{{checkall}}
        <ul>
        <li ng-repeat="item in items">
        <input type='checkbox' ng-model="item.checked" ng-click="checkboxClicked(item, $event.target.checked)"> {{item.name}}-- {{item.checked}}</li>
        </ul>
      </div>
     </body>

Black Mamba · Answer 2 · 2018-02-26T10:45:39.490

Here's a plunk Consider this answer: https://stackoverflow.com/a/22777980/6517383 You can dispatch Event to handle angular cycles.

$('a').dispatchEvent(new MouseEvent('click', {
  'view': window,
  'bubbles': true,
  'cancelable': true
}));

And do it like that https://stackoverflow.com/a/17110709/6517383

function checkAll(e) {
    var check = $(e).is(':checked');
    if (check) {
        $('[name="row_Checkbox"]:not(:checked)').trigger('click');
        $('[name="row_Checkbox"]:not(:checked)').trigger('change');
        $('[name="row_Checkbox"]:not(:checked)').trigger('input'); 
    }
    else {
        $('[name="row_Checkbox"]:checked').trigger('click');
        $('[name="row_Checkbox"]:checked').trigger('change');
        $('[name="row_Checkbox"]:checked').trigger('input'); 
    }

}

Other answers on this thread my be more helpful Update Angular model after setting input value with jQuery

Check-All checkbox do not change the ng-model

2 Answers2