How to check all checkboxs with angular

Question

I have a checkbox that should check all checkboxes. The checkbox works as it should by checking all the checkbox's, however angular doesnt think they have been checked? The only way angular knows if they are checked is if i manually check each one. (The brackets and for loop are blade php from laravel)

<label class="checkbox-inline">
  <input type="checkbox" ng-model="everyoneCheck"/> Everyone
</label>
@foreach($company->users as $tagIndex => $user)
    <label class="checkbox-inline">
      <input type="checkbox" ng-checked="everyoneCheck" ng-model="newDiscussion.notify_partners[{{$tagIndex}}]" ng-true-value="{{$user->id}}" /> {{ $user->first_name }} {{ $user->last_name }}
    </label>                  
@endforeach

upon click of the submit button i proceed to $http.post to my server, i just pass in an object to the post function, this is the object.

var discussionData = {
    'title': $scope.newDiscussion.title,
    'discussion': $scope.newDiscussion.summary,
    'company_id': company_id,
    'notify_partners': $scope.newDiscussion.notify_partners
};

for some reason when i use the check all approach, nothing gets put into notify_partners, however when i manually click each checkbox, they will get entered and submitted properly.

Any help? I feel like its some sort of binding issue, where i just need to tell angular, hey its updated!

Using ng-checked is only going to update the view, not the model — Emmanuel
– Emmanuel, Commented Feb 12, 2015 at 2:41
that makes sense why its not working then, any idea of a better approach? — Ryan Lebel
– Ryan Lebel, Commented Feb 12, 2015 at 2:43
Yeah, creating a function and looping over model values (see my answer below) — Emmanuel
– Emmanuel, Commented Feb 12, 2015 at 2:46

Emmanuel · Accepted Answer · 2015-02-12 03:39:41Z

1

Here's a way to do it:

<p><input type="checkbox" ng-model="globalCheck" ng-click="toggleCheckAll()" /> Check All</p>

<ul>
    <li ng-repeat="i in init">
        <input type="checkbox" ng-model="checkbox[$index]" /> Checkbox {{ $index + 1 }} {{ checkbox[$index] }} 
    </li>
</ul>

Then in your controller:

function myControl($scope) {

    $scope.globalCheck = false;
    $scope.checkbox = {};
    $scope.init = [0,1,2,3,4,5,6,7,8,9];

    $scope.toggleCheckAll = function() {
        var k, val = !$scope.globalCheck;
        console.log(val);
        for(k in $scope.init) {
            $scope.checkbox[k] = val;
        }
    }

}

See JSfiddle for working example

edited Feb 12, 2015 at 3:39

answered Feb 12, 2015 at 2:45

Emmanuel

5,4835 gold badges53 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Emmanuel Over a year ago

Just fixed a typo in the above ($scope.newDiscussion.notify_partners[k])

Ryan Lebel Over a year ago

This code doesnt seem to check them all, not sure why.

$scope.checkAll = function () { 	    var val = $scope.everyoneCheck; 	    for (var i = 0; i < $scope.newDiscussion.notify_partners.length; i++) { 	        $scope.newDiscussion.notify_partners[i] = val; 	    } 	}

Ryan Lebel Over a year ago

the for loop isn't running because $scope.newDiscussion.notify_partners doesnt have anything in it apparently. The first time the property is populated is in the view, which is the code you saw up top. I originally initiate the property in my init function with $scope.newDiscussion.notify_partners = [];

Ryan Lebel Over a year ago

If i check the check boxes then click the check all it removes them the checks, it just wont add them?

Josh · Accepted Answer · 2015-02-12 02:45:21Z

0

ng-checked does not update the value bound in ng-model. It only affects the presence of the checked attribute on the element itself.

Your best bet is to use ng-change to execute some function and update all your models accordingly.

<input type="checkbox" 
   ng-model="everyoneCheck"
   ng-change="toggleCheckAll()"/>

And in your controller, you can have toggleCheckAll() loop over your models and set them based on the value of everyoneCheck

answered Feb 12, 2015 at 2:45

Josh

45k7 gold badges106 silver badges125 bronze badges

Collectives™ on Stack Overflow

How to check all checkboxs with angular

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related