Wie kann man die Elementen nach dem Filter in AngularJS zählen

Wenn Sie die Listen von AngularJs mit der Direktive ngRepeat verwenden und ein Filter benutzen, dann möchten Sie auch wahrscheinlich wissen, wie viele Elemente nach dem Filter bleiben. Es gibt zwei Methoden, um diese Information zu bekommen: in der Vorlage und in Javascript (im Controller).

Lassen Sie uns entsprechende Beispiele betrachten.

Wie kann man die Anzahl von Elementen nach dem Filter in der Vorlage erfahren.

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

Wie Sie sehen, können Sie die Filterergebnisse in einer Variable sammeln und dann dieses Datenfeld (mit der Eingabe der Länge) verwenden. Das Datenfeld "users" ist unverändert, d. h., dass es alle Benutzer enthält, und das Datenfeld "usersList" enthält die nach dem Filtern verbliebenen Benutzer.

Wie kann man die Anzahl von Elementen nach dem Filter im Controller erfahren.

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