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

Displaying Length of Filtered Data in ng-repeat

In Angular applications, data is often displayed using the ng-repeat directive, which iterates over an array or collection. However, when filtering the data based on user input, it becomes necessary to update the displayed count of items.

When using ng-repeat with a filter, the data.length property will continue to represent the entire dataset, regardless of any applied filters. To obtain the count of filtered items, alternative approaches are required.

For Angular 1.3

Angular 1.3 introduced alias expressions, which allow assigning an alias to the filtered dataset. By using this alias, you can access the filtered data's length as shown below:

<div ng-repeat="person in data | filter:query as filtered">
</div>
<div>Showing {{filtered.length}} Persons</div>

For Angular prior to 1.3

In earlier versions of Angular, a workaround is to assign the filtered data to a new variable and then use that variable for display:

<div ng-repeat="person in filtered = (data | filter: query)">
</div>
<div>Showing {{filtered.length}} Persons</div>

By implementing these techniques, you can dynamically display the count of filtered items in your Angular application, ensuring that the user is provided with accurate information about the visible data.

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