How to display length of filtered ng-repeat data

Question

I have a data array which contains many objects  JSON format   The following can be assumed as  the contents of this array   var data              name    Jim        age    25               name    Jerry        age   27          Now  I display these details as    lt div ng-repeat  person in data   filter  query  gt   lt  div   Here  query is modeled to an input field in which the user can restrict the data displayed   Now  I have another location in which I display the current count of people   person being display  i e Showing   data length   Persons    What I want to do is that when the user searches for a person and the data displayed is filtered based on the query  the Showing   persons also change the value of people being shown currently  But it is not happening  It always displays the total persons in data rather than the filtered one - how do I get the count of filtered data

User · Answer

You can do it with 2 ways  In template and in Controller  In template you can set your filtered array to another variable  then use it like you want  Here is how to do it    lt ul gt     lt li data-ng-repeat  user in usersList    users   gender filterGender   data-ng-bind  user name  gt  lt  li gt   lt  ul gt         lt span gt    usersList length   number    lt  span gt    If you need examples  see the AngularJs filtered count examples demos

User · Answer

The easiest way if you have   lt div ng-repeat  person in data   filter  query  gt  lt  div gt    Filtered data length    lt div gt     data   filter  query  length    lt  div gt

User · Answer

ngRepeat creates a copy of the array when it applies a filter  so you can t use the source array to reference only the filtered elements   In your case  in may be better to apply the filter inside of your controller using the  filter service   function MainCtrl   scope  filterFilter                  scope filteredData   myNormalData      scope  watch   myInputModel   function   val          scope filteredData   filterFilter  myNormalData  val                        And then you use the filteredData property in your view instead  Here is a working Plunker  http   plnkr co edit 7c1l24rPkuKPOS5o2qtx p preview

User · Answer

Since AngularJS 1 3 you can use aliases     item in items   filter x as results   and somewhere    lt span gt Total   results length   result s   lt  span gt    From docs       You can also provide an   optional alias expression which will then store the intermediate   results of the repeater after the filters have been applied  Typically   this is used to render a special message when a filter is active on   the repeater  but the filtered result set is empty       For example  item in items   filter x as results will store the   fragment of the repeated items as results  but only after the items   have been processed through the filter

User · Answer

For completeness  in addition to previous answers  perform calculation of visible people inside controller  you can also perform that calculations in your HTML template as in the example below   Assuming your list of people is in data variable and you filter people using query model  the following code will work for you     lt p gt Number of visible people     data filter query  length   lt  p gt   lt p gt Total number of people    data length   lt  p gt       data length   - prints total number of people    data filter query  length   - prints filtered number of people   Note that this solution works fine if you want to use filtered data only once in a page  However  if you use filtered data more than once e g  to present items and to show length of filtered list  I would suggest using alias expression  described below  for AngularJS 1 3  or the solution proposed by  Wumms for AngularJS version prior to 1 3   New Feature in Angular 1 3  AngularJS creators also noticed that problem and in version 1 3  beta 17  they added  alias  expression which will store the intermediate results of the repeater after the filters have been applied e g     lt div ng-repeat  person in data   filter query as results  gt       lt  -- template     -- gt   lt  div gt    lt p gt Number of visible people    results length   lt  p gt    The alias expression will prevent multiple filter execution issue   I hope that will help

User · Answer

Here is worked example See on Plunker     lt body ng-controller  MainCtrl  gt       lt input ng-model  search  type  text  gt       lt br gt      Showing   data length   Persons   lt br gt      Filtered   counted        lt ul gt         lt li ng-repeat  person in data   filter search  gt            person name          lt  li gt       lt  ul gt     lt  body gt    lt script gt   var app   angular module  angularjs-starter        app controller  MainCtrl   function  scope   filter       scope data                  name    Jim    age    21                 name    Jerry    age   26                 name    Alex     age    25                 name    Max    age   22                scope counted    scope data length      scope  watch  search   function query        scope counted    filter  filter    scope data  query  length

User · Answer

It is also useful to note that you can store multiple levels of results by grouping filters  all items    items length   filtered items    filteredItems length   limited and filtered items    limitedAndFilteredItems length    lt div ng-repeat  item in limitedAndFilteredItems    filteredItems    items   filter search    limitTo 25   gt     lt  div gt    here s a demo fiddle

User · Answer

For Angular 1 3   credits to  Tom   Use an alias expression  Docs  Angular 1 3 0  ngRepeat  scroll down to the Arguments section     lt div ng-repeat  person in data   filter query as filtered  gt   lt  div gt    For Angular prior to 1 3  Assign the results to a new variable  e g  filtered  and access it    lt div ng-repeat  person in filtered    data   filter  query   gt   lt  div gt    Display the number of results   Showing   filtered length   Persons   Fiddle a similar example  Credits go to Pawel Kozlowski

[javascript] How to display length of filtered ng-repeat data

Examples related to javascript

Examples related to angularjs