Number of objects in a ng-repeat that is filtered

Question

I'm using angularjs in a site and there I have a search input that filters a list on a view. This list is displayed with a ng-repeat that has a filter from the search input:

The search input:

<input type="text" placeholder="Device Search" class="form-control hasclear" 
  ng-model="searchText"/>

And here the ng-repeat:

<tr ng-click="openModal(device['device_id'], device)" 
  ng-repeat="device in devices | filter:searchText | orderBy:predicate:reverse">

As you see the filter in the ng-repeat has the filter that uses the searchText variable from the ng-model. I would like to know if it's possible to know how many objects were found when the user enters a text in the search input (How many devices the ng-repeat is displaying being filtered). Like: 0 devices were found, 3 devices were found...

Is there a way to display this information by the way I built this search?

I tried to find something here, but I couldn't. Should I delete it here? @isherwood — Joabe da Luz, Feb 24 '15 at 22:15
Not necessarily. See http://meta.stackexchange.com/questions/230/duplicate-question-etiquette-to-delete-or-not-to-delete — isherwood, Feb 24 '15 at 22:22

thank_you · Answer 1 · 2015-02-24T22:13:35.467

2

EDIT:

Based on Dave's response which is correct, you must assign a variable to the filtered result as so

<tr ng-click="openModal(device['device_id'], device)" 
ng-repeat="device in filtered_devices = (devices | filter:searchText | orderBy:predicate:reverse)">

Then, below your tr tag you can type:

<div>{{filtered_devices.length + ' devices were found'}}</div>

Plunkr example here

edited Feb 24 '15 at 22:13

answered Feb 24 '15 at 22:08

thank_you

11,001
19
101
185

this won't show filtered length, only total of original array – charlietfl Feb 24 '15 at 22:13
What am I missing? I have an example plunkr and it's working fine. – thank_you Feb 24 '15 at 22:14
sure, edited version works but comment was made before editing – charlietfl Feb 24 '15 at 22:16

score 2 · Accepted Answer · answered Feb 24 '15 at 22:10

If you need it outside of your <tr> tag, I would do it like this:

<tr ng-click="openModal(device['device_id'], device)" 
ng-repeat="device in filteredResults = (devices | filter:searchText | orderBy:predicate:reverse)">

{{filteredResults.length}} devices were found

score 1 · Answer 3 · answered Feb 24 '15 at 22:10

with a filter like filter:x as result it stores the resultant collection on the variable result.

So you can do:

<tr ng-click="openModal(device['device_id'], device)" ng-repeat="device in devices | filter:searchText as filteredCollection | orderBy:predicate:reverse">
  <td><span>Filtered collection size: {{filteredCollection.length}}</span><td>
</tr>

score 0 · Answer 4 · answered Feb 24 '15 at 22:08

0

I am sure there is a possibility with the properties:

$last
$index

something like:

<span ng-if="$last" > {{$index}} devices found </span>

documentation: https://docs.angularjs.org/api/ng/directive/ngRepeat

answered Feb 24 '15 at 22:08

Joniras

1,258
10
32

Number of objects in a ng-repeat that is filtered

4 Answers4