CODEWITHSUNDEEP
javascriptangularjs
Michael Anthopolous
Michael Anthopolous

Reputation: 231

Toggle all in ng-repeat

I have a list of items that can be selected:

<div ng-repeat="item in items" ng-init="selected = false" ng-click="selected = !selected">
    ...
</div>

I want a simple checkbox outside of the list that will select all of the items IN the list. What's the prettiest Angular way to accomplish this?

Upvotes: 0

Views: 351

Answers (1)

Jerome
Jerome

Reputation: 291

You can create a function in your controller to loop through each item in your items array and set its selected property to true. Here's a sample of the function:

$scope.selectAll = function(selected) {
    angular.forEach($scope.items, function(item) {
        item.selected = selected;
    });
}

I made the function take an argument so you can re-use it to do an de-select all.

Next, you can create a button that will call this function, passing true as an argument. 

<button type="button" ng-click="selectAll(true)">Select All</button>

Here's a very rudimentary jsfiddle for it: http://jsfiddle.net/x906p4qx/

Hope it helps!

Upvotes: 1

Related Questions