How can I obtain the result array of an angular "| filter" expression in a variable?

Question

In angular, you can write filter expressions like

<input type="text" ng-model="query">

<table>
    <tr ng-repeat="phone in phones | filter: query">
       <td>{{phone.vendor}}</td>
       <td>{{phone.model}}</td>
    </tr>
</table>

and it will update the table to show only the phones which match the query text you enter into the input.

How can I get the corresponding result array of the filter, e.g. the [phone object]s that are currently displayed, in a variable (e.g. a scope variable)?

Possible duplicate of [AngularJS - how to get an ngRepeat filtered result reference](https://stackoverflow.com/questions/11721863/angularjs-how-to-get-an-ngrepeat-filtered-result-reference) — Damjan Pavlica, Nov 25 '17 at 22:11

score 80 · Accepted Answer · answered Apr 17 '13 at 07:19

80

You can actually assign new variables to the scope in an angular expression. So the simplest solution would be to do <tr ng-repeat="phone in (filteredPhones = (phones | filter: query))">. filteredPhones is now a variable in the current scope - see this plnkr example.

answered Apr 17 '13 at 07:19

joakimbl

18,081
5
54
53

1

This is great, and so simple! – nh2 Apr 17 '13 at 14:34
Is it possible to get somehow the event on query changes? – Lipis Apr 26 '13 at 19:19
2

You could do `$scope.$watch('query',function(newQuery,oldQuery){ ... });` – joakimbl Apr 27 '13 at 06:55
this doesn't work for me - the filteredVariable is always undefined on my $scope. does this require a specific version of angular? – Adam Diament Jul 11 '17 at 09:36

score 19 · Answer 2 · answered Apr 17 '13 at 02:42

Inside your controller, you can watch changes to your query text and use the Javascript equivalent of {expression} | filter: {expression}, which is $filter('filter') (using the filter named 'filter' from the service $filter, which you have to inject).

Let's say your HTML snippet is controlled by the controller MyController. Then you can change it to:

myApp.controller("MyController", ["$scope", "$filter", function($scope, $filter) {

    $scope.$watch('query', function(newVal, oldVal) {
      console.log("new value in filter box:", newVal);

      // this is the JS equivalent of "phones | filter: newVal"
      $scope.filteredArray = $filter('filter')($scope.phones, newVal);
    });
}]);

Whenever your query changes, the filtered array will be available as filteredArray in your $scope, and you can use filteredArray as an expression in your snippet.

All this should actually be documented in http://docs.angularjs.org/api/ng.$filter and http://docs.angularjs.org/api/ng.filter:filter. However, the documentation of the first link is way too sparse you can really only get it from the comments to the second link. I tried to add it to the docs, but after cloning angular and building the docs, accessing them via the browser simply did not work and navigating the API failed silently without any useful error, so I gave up on that.

Watching filteredPhones in @joakimbl's example did not seem to be a good solution (too many events) so if you want to add some logic after the filter is applied, this version is preferable, I think. — aweibell, Sep 03 '13 at 15:42

How can I obtain the result array of an angular "| filter" expression in a variable?

2 Answers2

Linked