How to Show Angularjs Filtered Count

If you use AngularJs lists with ngRepeat directive and set a filter on it, you probably want to know how many items there are after filtering. You can do this in two ways, in template and with javascript (controller).

Let's consider examples

How to get filter count in template

<!DOCTYPE html>
<html>
  <head>
    <title>www.W3docs.com</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  </head>
  <body data-ng-app="MyModule" data-ng-controller="MyController">
    <select data-ng-model="filterGender">
      <option value='male'>Male</option>
      <option value='female'>Female</option>
    </select>

    <ul>
      <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
    </ul>

    <h3>{{ usersList.length | number }}/{{ users.length }}</h3>

    <script>
      angular.module('MyModule', [])
       .controller('MyController', function($scope){
         $scope.users = [
            {name: 'Mike', gender: 'male', age: 23},
            {name: 'Jenifer', gender: 'female', age: 32},
            {name: 'Tom', gender: 'male',  age: 14},
            {name: 'Ellen', gender: 'female',  age: 42},
            {name: 'John', gender: 'male',  age: 22},
            {name: 'Hayk', gender: 'male', age: 18},
            {name: 'Eliana', gender: 'female', age: 28}
         ];
       })
       .filter('gender', function(){
         return function(users, gender){
           if(!gender){
             return users;
           }
           var arr = [];
           angular.forEach(users, function(v){
             if(v.gender === gender){
               arr.push(v);
             }
           })

           return arr;
         }
       })
    </script>
  </body>
</html>

As you see, you can collect the filter results into another variable, then use that array (getting its length). The "users" array is unchanged, it means that "users" array contains all users, and "usersList" array contains the users remained after filtering.

Now let's try to solve it inside controller.

How to get filter count in controller

<!DOCTYPE html>
<html>
  <head>
    <title>www.W3docs.com</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  </head>
  <body data-ng-app="MyModule" data-ng-controller="MyController">
    <select data-ng-model="filterGender" ng-change="onGenderChange()">
      <option value='male'>Male</option>
      <option value='female'>Female</option>
    </select>

    <ul>
      <li data-ng-repeat="user in usersList" data-ng-bind="user.name"></li>
    </ul>

    <h3>{{ usersList.length | number }}/{{ users.length }}</h3>

    <script>
      angular.module('MyModule', [])
       .controller('MyController', function($scope, $filter){
         $scope.users = [
            {name: 'Mike', gender: 'male', age: 23},
            {name: 'Jenifer', gender: 'female', age: 32},
            {name: 'Tom', gender: 'male',  age: 14},
            {name: 'Ellen', gender: 'female',  age: 42},
            {name: 'John', gender: 'male',  age: 22},
            {name: 'Hayk', gender: 'male', age: 18},
            {name: 'Eliana', gender: 'female', age: 28}
         ];

         $scope.usersList = angular.copy($scope.users);

         $scope.onGenderChange = function(){
           $scope.usersList = $filter('gender')($scope.users, $scope.filterGender)
         };
       })
       .filter('gender', function(){
         return function(users, gender){
           if(!gender){
             return users;
           }
           var arr = [];
           angular.forEach(users, function(v){
             if(v.gender === gender){
               arr.push(v);
             }
           })

           return arr;
         }
       })
    </script>
  </body>
</html>