How to Display Filtered Data Count in Angular ng-repeat?

Displaying Filtered Data Count in Angular ng-repeat

When using ng-repeat to display filtered data in Angular, it can be challenging to accurately display the count of filtered items. Initially, you have a data array containing multiple objects, and you filter the data based on a user input query. However, the count of displayed persons remains the same, regardless of the filter.

To resolve this issue and display the count of filtered data, Angular provides two approaches:

Method 1 (Angular 1.3 ): Alias Expression

For Angular versions 1.3 and above, you can use an alias expression to create a new variable that references the filtered data. This alias expression allows you to directly access the length of the filtered items:

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

Method 2 (Angular Pre-1.3): Variable Assignment

In earlier versions of Angular, you can assign the results of the filtered ng-repeat to a new variable, like so:

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

Then, you can display the count of filtered items:

Showing {{filtered.length}} Persons

By using either method, you can dynamically update the count of displayed persons as the user filters the data, providing a more accurate representation of the filtered results.

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