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).

Since AngularJS is now a deprecated framework, you can use JavaScript modern frameworks like Vuejs, React and Angular, instead.

How to get filter count in template

Let's consider examples

Example

<!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>