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.

Answer 1

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.

Answer 2

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>