Determining how many results are shown by ng-repeat filter

为君一笑 提交于 2019-12-11 10:14:55

问题


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).


回答1:


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>



回答2:


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




回答3:


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.



来源:https://stackoverflow.com/questions/26218823/determining-how-many-results-are-shown-by-ng-repeat-filter

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!