AngularJS: Comment afficher la longueur des données filtrées

Question

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

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

Maintenant, j'ai l'affichage de ces détails:

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

Ici, la requête est modélisé pour 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 en cours d'affichage, j'.e Showing {{data.length}} Persons

Ce que je veux faire c'est que lorsque l'utilisateur recherche une personne et les données affichées sont filtrés en fonction de la requête, l' Showing...persons également modifier la valeur de la personne d'être montré à l'heure actuelle. Mais il n'est pas le cas. Il affiche toujours le nombre total de personnes dans les données, plutôt que de l'filtré - comment puis-je obtenir le nombre de données filtrées?

Answer 1

Affectez 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 . Crédits accordés à Pawel Kozlowski

Answer 2

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

En supposant que votre liste de personnes est en data variable et permet de filtrer les personnes à l'aide de query modèle, le code suivant va travailler pour vous:

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

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

Notez que cette solution fonctionne très bien si vous souhaitez utiliser les données filtrées qu'une seule fois dans une page. Toutefois, si vous utilisez les données filtrées plus d'une fois par exemple, de présenter les éléments et pour montrer la longueur de la liste filtrée, je voudrais suggérer à l'aide de l'alias de l'expression (décrit ci-dessous) pour AngularJS 1.3+ ou de la solution proposée par @Wumms pour AngularJS version antérieure à la version 1.3.

Nouvelle Fonctionnalité dans Angulaire 1.3

AngularJS créateurs aussi remarqué ce problème et en version 1.3 (beta 17) - ils ajouté, "alias" expression qui permet de stocker les résultats intermédiaires de la répétition après les filtres ont été appliqués par ex.

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

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

L' alias expression permettra d'éviter de multiples filtre problème d'exécution.

J'espère que cela va aider.

Answer 3

ngRepeat crée une copie du tableau lorsqu'il applique un filtre, de sorte que vous ne pouvez pas utiliser le tableau source pour la référence seulement les éléments filtrés.

Dans votre cas, peut-être mieux pour appliquer le filtre à l'intérieur de votre contrôleur à l'aide de l' $filter service:

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

  $scope.filteredData = myNormalData;

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

  // ...
}

Et puis vous utilisez l' filteredData de la propriété de votre point de vue à la place. Ici, c'est un travail Plunker: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

Answer 4

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>

De docs:

Vous pouvez également fournir un en option alias expression qui stockera l'intermédiaire résultats de la répétition après les filtres ont été appliqués. Généralement ce est utilisé pour afficher un message spécial lorsqu'un filtre est actif sur le répéteur, mais le jeu de résultats filtré est vide.

Par exemple: article dans les articles | filtre:x que les résultats de stocker les fragment de l'élément répété que les résultats, mais seulement après que les éléments ont été traitées par le filtre.

Answer 5

Voici un 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;
  });
});