Как узнать количество элементов после фильтрации в AngularJS

Если вы используете списки AngularJs с директивой ngRepeat и применяете фильтр, то вы наверняка хотите знать, сколько элементов остается после фильтрации. Есть два способа узнать это: в шаблоне и в Javascript (в контроллере).

Давайте рассмотрим примеры.

Как узнать количество элементов после фильтрации в шаблоне

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

Попробуйте сами!

Как видите, вы можете собрать результаты фильтра в одной переменной, а потом использовать этот массив (указав длину). Массив "users" неизменен, а это значит, что в нем содержатся все пользователи, а в массиве "usersList" содержатся пользователи, оставшиеся после фильтрации.

Как узнать количество элементов после фильтрации в контроллере

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

Попробуйте сами!