Comment Montrer le Compte Filtré de Angularjs

Si vous utilisez les listes AngularJs avec la directive ngRepeat et y mettez un filtre, vous voudrez probablement savoir combien d’éléments il y a après le filtrage. Vous pouvez le faire de deux manières, dans un template (modèle) et avec javascript (contrôleur).

Comment obtenir le nombre de filtres dans le modèle

Considérons des exemples.

Exemple

<!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'>Masculin</option>
      <option value='female'>Féminin</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>

Essayez-vous-même!

Comme vous le voyez, vous pouvez collecter les résultats du filtre dans une autre variable, puis utiliser ce tableau (en obtenant sa longueur). Le tableau "users" est inchangé, cela signifie que le tableau "users" contient tous les utilisateurs et que le tableau "usersList" contient les utilisateurs restés après le filtrage.

Maintenant essayons de le resoudre au sein du contrôleur.

Comment obtenir le nombre de filtre dans le contrôleur

<!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'>Masculin</option>
      <option value='female'>Féminin</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>

Essayez-vous-même!