Angularjs filter and select all checkbox

Question

I have an array of items I am displaying with

<tr ng-repeat="i in items | filter:search_text" ...>

the items have a check box that denotes "selected" or not. how can I know which items are displayed by the filter when I need to do something like call a delete function that will delete all selected items ?

Items which have been selected (checked in the checkbox) and then hidden by filtering are still selected. I need a way to know which item is on screen at the moment.

Jack · Accepted Answer · 2014-03-28 08:18:30Z

13

You can use $filter to call a filter in your controller.

app.controller('MyCtrl', function($scope, $filter){ 
   var filter = $filter('filter');

   $scope.items = [/* your items here */]

   $scope.selectAllFilteredItems = function (){
      var filtered = filter($scope.items, $scope.search_text);

      angular.forEach(filtered, function(item) {
         item.selected = true;
      });
   };
});

You would then call selectAllFilteredItems() in an ng-click or anywhere else you needed to.

edited Mar 28, 2014 at 8:18

Jack

7341 gold badge8 silver badges15 bronze badges

answered Feb 26, 2013 at 14:26

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

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

4 Comments

Unenumrated Over a year ago

Thx, but not sure I understand, where does search_text go ? and didn't you mean the forEach loop to be on filtered ?

bmleite Over a year ago

I was going to answer exactly the same =) Here's a simple fiddle jsfiddle.net/bmleite/syYxa

Unenumrated Over a year ago

the fiddle is great ! thx, but it lacks checking which items are actually selected,

Ben Lesh Over a year ago

Lol... thanks @MarkRajcok... I'm full of typos today apparently.

Stirling · Accepted Answer · 2013-10-16 23:24:23Z

1

Not really super polished, but it works.

In your controller

var filter = $filter('filter');
$scope.item_ids = [];
$scope.selectAllFilteredItems = function (){
    var filtered = filter($scope.items, $scope.searchText);
    angular.forEach(filtered, function(item, key) {
        if($scope.item_ids.indexOf(item.id) == -1){
            $scope.item_ids.push(item.id);
            $scope.items[key].selected = true;
        }else{
            $scope.item_ids.splice($scope.item_ids.indexOf(item.id),1);
            $scope.items[key].selected = false;
        }
    });
};

Then in the table you have a checkbox to select all or unselect all.

<table class='table table-striped'>
    <tr>
        <th><input type="checkbox" ng-click="selectAllFilteredItems()"></th>
    </tr>
    <tr ng-repeat="item in items | filter:searchText">
        <td><input type="checkbox" ng-model="item.selected"></td>
    </tr>
</table>

answered Oct 16, 2013 at 23:24

Stirling

4,3883 gold badges25 silver badges16 bronze badges

1 Comment

imizeropt Over a year ago

What about the case that after an selection one element will be deselected? How to handle the deselection of the Select All Button?

Collectives™ on Stack Overflow

Angularjs filter and select all checkbox

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related