Comment afficher la longueur des données de répétition ng filtrées

J'ai un tableau de données qui contient de nombreux objets (format JSON). Les éléments suivants peuvent être considérés comme le contenu de ce tableau:

var data = [
  {
    "name": "Jim",
    "age" : 25
  },
  {
    "name": "Jerry",
    "age": 27
  }
];

Maintenant, j'affiche ces détails comme:

<div ng-repeat="person in data | filter: query">
</div

Ici, la requête est modélisée dans un champ de saisie dans lequel l'utilisateur peut restreindre les données affichées.

Maintenant, j'ai un autre emplacement dans lequel j'affiche le nombre actuel de personnes / personne étant affiché, à savoir Showing {{data.length}} Persons

Ce que je veux faire, c'est que lorsque l'utilisateur recherche une personne et que les données affichées sont filtrées en fonction de la requête, cela Showing...personsmodifie également la valeur des personnes affichées actuellement. Mais cela ne se produit pas. Il affiche toujours le nombre total de personnes dans les données plutôt que celui filtré - comment puis-je obtenir le nombre de données filtrées?

Pour Angular 1.3+ (crédits à @Tom)

Utilisez une expression d'alias (Docs: Angular 1.3.0: ngRepeat , faites défiler jusqu'à la section Arguments ):

<div ng-repeat="person in data | filter:query as filtered">
</div>

Pour Angular avant 1.3

Attribuez les résultats à une nouvelle variable (par exemple filtered) et accédez-y:

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

Afficher le nombre de résultats:

Showing {{filtered.length}} Persons

Fiddle un exemple similaire . Les crédits vont à Pawel Kozlowski

Pour être complet, en plus des réponses précédentes (effectuer le calcul des personnes visibles à l'intérieur du contrôleur), vous pouvez également effectuer ces calculs dans votre modèle HTML comme dans l'exemple ci-dessous.

En supposant que votre liste de personnes est datavariable et que vous filtrez les personnes à l'aide du querymodèle, le code suivant fonctionnera pour vous:

<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>

• {{data.length}} - imprime le nombre total de personnes
• {{(data|filter:query).length}} - imprime le nombre de personnes filtré

Notez que cette solution fonctionne correctement si vous souhaitez utiliser les données filtrées une seule fois dans une page. Cependant, si vous utilisez des données filtrées plus d'une fois, par exemple pour présenter des éléments et afficher la longueur de la liste filtrée, je suggère d'utiliser l' expression d'alias (décrite ci-dessous) pour AngularJS 1.3+ ou la solution proposée par @Wumms pour AngularJS version antérieure à 1.3.

Nouvelle fonctionnalité dans Angular 1.3

Les créateurs d'AngularJS ont également remarqué ce problème et dans la version 1.3 (beta 17), ils ont ajouté l'expression "alias" qui stockera les résultats intermédiaires du répéteur après l'application des filtres, par exemple

<div ng-repeat="person in data | filter:query as results">
    <!-- template ... -->
</div>

<p>Number of visible people: {{results.length}}</p>

L' expression d'alias empêchera plusieurs problèmes d'exécution de filtre.

J'espère que cela aidera.

La façon la plus simple si vous avez

<div ng-repeat="person in data | filter: query"></div>

Longueur des données filtrées

<div>{{ (data | filter: query).length }}</div>

ngRepeat crée une copie du tableau lorsqu'il applique un filtre, vous ne pouvez donc pas utiliser le tableau source pour référencer uniquement les éléments filtrés.

Dans votre cas, il peut être préférable d'appliquer le filtre à l'intérieur de votre contrôleur en utilisant le $filterservice:

function MainCtrl( $scope, filterFilter ) {
  // ...

  $scope.filteredData = myNormalData;

  $scope.$watch( 'myInputModel', function ( val ) {
    $scope.filteredData = filterFilter( myNormalData, val );
  });

  // ...
}

Et puis vous utilisez la filteredDatapropriété dans votre vue à la place. Voici un Plunker fonctionnel: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

Depuis AngularJS 1.3, vous pouvez utiliser des alias:

item in items | filter:x as results

et quelque part:

<span>Total {{results.length}} result(s).</span>

Depuis les documents :

Vous pouvez également fournir une expression d'alias facultative qui stockera ensuite les résultats intermédiaires du répéteur après l'application des filtres. Il est généralement utilisé pour afficher un message spécial lorsqu'un filtre est actif sur le répéteur, mais que l'ensemble de résultats filtré est vide.

Par exemple: élément dans les éléments | filter: x as results stockera le fragment des éléments répétés en tant que résultats, mais uniquement après que les éléments auront été traités via le filtre.

Il est également utile de noter que vous pouvez stocker plusieurs niveaux de résultats en regroupant les filtres

all items: {{items.length}}
filtered items: {{filteredItems.length}}
limited and filtered items: {{limitedAndFilteredItems.length}}
<div ng-repeat="item in limitedAndFilteredItems = (filteredItems = (items | filter:search) | limitTo:25)">...</div>

voici un violon de démonstration

Voici l'exemple travaillé Voir sur Plunker

  <body ng-controller="MainCtrl">
    <input ng-model="search" type="text">
    <br>
    Showing {{data.length}} Persons; <br>
    Filtered {{counted}}
    <ul>
      <li ng-repeat="person in data | filter:search">
        {{person.name}}
      </li>
    </ul>
  </body>

<script> 
var app = angular.module('angularjs-starter', [])

app.controller('MainCtrl', function($scope, $filter) {
  $scope.data = [
    {
      "name": "Jim", "age" : 21
    }, {
      "name": "Jerry", "age": 26
    }, {
      "name": "Alex",  "age" : 25
    }, {
      "name": "Max", "age": 22
    }
  ];

  $scope.counted = $scope.data.length; 
  $scope.$watch("search", function(query){
    $scope.counted = $filter("filter")($scope.data, query).length;
  });
});

Vous pouvez le faire de 2 manières . Dans le modèle et dans le contrôleur . Dans le modèle, vous pouvez définir votre tableau filtré sur une autre variable, puis l'utiliser comme vous le souhaitez. Voici comment faire:

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

Si vous avez besoin d'exemples, consultez les exemples / démos de comptage filtré AngularJs