How to display length of filtered ng-repeat data

AngularJS version-based solutions

AngularJS 1.3+: alias 'as' point of view

Post AngularJS 1.3, employing as in ng-repeat is highly efficient, displayed in the fast answer. To intensify its functionality, consider implementing:

• Bidirectional Binding: Directly bind the length value to $scope: $scope.filteredItemsLength = filteredItems.length. Here comes your real-time counting, reinventing abacus the Angular way!
• Dynamic count feedback: Employ $watch to scrutinize changes in the searchText, allowing real-time user engagement with filter count. It's like your mirror, faithfully reflecting your every move!

AngularJS <1.3: filter management

Pre AngularJS 1.3, the aliasing technique does a vanishing act. Imagine applying filters within the controller with $filter to dynamically manage counts:

$scope.filteredItems = $filter('filter')($scope.items, $scope.searchText);


A discrete watcher on the searchText is essential to spring to life the filteredItems array. Our watcher has one job, do it well!

$scope.$watch('searchText', function(newValue) {
  $scope.filteredItems = $filter('filter')($scope.items, newValue);
});


Potential edge-cases and UX advancements

When no results defrost the filter

Freeze the sledge when no filtered results surface, enhancing user connectivity:

<div ng-show="filteredItems.length === 0">I searched high and low, yet no items match your terms. Try again?</div>


Optimal data management

Hold performance issues at bay, particularly with bulky data by warding off repetitive filters. The masked hero Angular, say hello to your sidekick: controller-based filtering. Together, you create performance-optimized habits.

A date with objects

Paint your data as an array of objects, ensuring your filtering time and readability flow favorably. Almost like dressing for the perfect date!

$scope.books = [
  { title: 'AngularJS Guide', author: 'Ng-conf Crew' },
  { title: 'Mastering AngularJS', author: 'John Papa' },
];


A dive into solutions for unique scenarios

Real-time filtering experience

Incorporate filterFilter within the controller to spawn a filtering experience in real time. Staying current with the changing dataset, it ensures counts evolve immediately. Angular's hefty caffeine dose keeps the display and model in sync!

Excavating single repeats

Evict multiple repetitions of the same filter with ng-repeat. A single expression says it all:

<div ng-repeat="item in (data | filter:query as results)">
  {{ item }}
</div>
Flaunt your tastes; you have {{ results.length }} suited items!


Upgraded visualization with aliasing

Embrace (data | filter: x as results) with AngularJS 1.3+. Benefiting from neat decoupling, your view and controller write a modular and testable story. It's like setting a date between data and logic.