1

If I use ng-repeat with filter, how can I determine how many elements are filtered out (or vice versa, how many are shown)? Specifically, I would like to create a search bar that creates the filter, but I would also like to show how many elements are hidden by the filter (ie something like Showing 6 of 10 results).

David says Reinstate Monica
  • 19,209
  • 22
  • 79
  • 122

3 Answers3

4

Please see here http://jsbin.com/xuyuy/1/edit

In your repeater you can create new array ie : personsfiltered

ng-repeat="person in personsfilterd = (persons | filter : search )

and after that just display length of orignal array and filtered array :

Showing {{personsfilterd.length}} of {{persons.length }} results

Full code here:

var app = angular.module('app', []);

app.controller('fCtrl', function($scope) {

  $scope.persons = [
    'Mike', 'Tom', 'Tim', 'Jim', 'Ken'
  ]

});

 <div ng-app="app">
    <div ng-controller="fCtrl">
      <input type="text" ng-model = "search"> Showing {{personsfilterd.length}} of {{persons.length }} results
      <li ng-repeat="person in personsfilterd = (persons | filter : search )">{{person}}</li>
    </div>
    </div>
sylwester
  • 16,498
  • 1
  • 25
  • 33
  • I was using this for a while and it was working great, but it stopped working for some reason. Can you perhaps opine on my new question: http://stackoverflow.com/questions/26341910/variable-set-in-ng-repeat-not-being-created – David says Reinstate Monica Oct 13 '14 at 14:43
0

First, the ngRepeat has these: $index, $first, $middle, $last for determining the current position. So I guess you may be interested in the $last. What I'm not sure about is whether it will pick up the original count or the filtered one.

EDIT: You can obtain the count of original value from your ctrl, by setting the varX.length and using that in your template (HTML code) and then, assuming that $last is returning the final count+1 (as it's 0-based) you can have the count after filter is applied.

ngRepeat

developer10
  • 1,450
  • 2
  • 15
  • 31
0

I found my answer here. The solution is to assign the filtered data to a new variable in the ng-repeat. Potentially could cause some memory issues, but not really relevant in my case.

Community
  • 1
  • 1
David says Reinstate Monica
  • 19,209
  • 22
  • 79
  • 122