How to Display the Length of Filtered Data in ng-repeat?

Displaying Length of Filtered ng-repeat Data

Maintaining the correct filtered data count in your application can be crucial for providing accurate information to your users. Here's how to solve the issue of obtaining the count of filtered data in ng-repeat:

Understanding the Issue

When filtering data using ng-repeat, the original length of the data array is displayed instead of the count of filtered items. This occurs because ng-repeat operates on the original array, not the filtered one.

Using Alias Expressions (Angular 1.3 )

In Angular 1.3 and above, alias expressions offer a straightforward solution. By using an alias in the ng-repeat directive, you can assign the filtered array to a new variable:

<div ng-repeat="person in data | filter:query as filtered">
</div>

Accessing the filtered array's length is now possible:

Showing {{filtered.length}} Persons

Assigning to a New Variable (Angular Prior to 1.3)

For Angular versions prior to 1.3, you can assign the filtered array to a new variable:

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

This variable can be used to display the filtered array's length:

Showing {{filtered.length}} Persons

The above is the detailed content of How to Display the Length of Filtered Data in ng-repeat?. For more information, please follow other related articles on the PHP Chinese website!