Comment afficher la longueur des données filtrées ng-repeat

j'ai un tableau de données qui contient beaucoup d'objets (format JSON). On peut supposer que le contenu de ce tableau est le suivant:

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 à un champ d'entrée dans lequel l'utilisateur peut restreindre les données affichées.

maintenant, j'ai un autre endroit dans lequel j'affiche le nombre actuel de personnes / personnes étant exposées, I. e Showing {{data.length}} Persons

ce que je veux faire est que lorsque l'utilisateur recherche une personne et que les données affichées sont filtrées sur la base de la requête, le Showing...persons change également la valeur des personnes affichées actuellement. 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?

412
demandé sur isherwood 2013-03-10 01:56:26
la source

8 ответов

pour L'angle 1,3+ (crédits à @Tom)

utiliser une expression d'alias (Docs: Angular 1.3.0: ngRepeat , faire défiler vers le bas jusqu'à la Arguments section):

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

pour les angles antérieurs à 1.3

attribuer les résultats à une nouvelle variable (par exemple filtered ) et y accéder:

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

afficher le nombre de résultats:

Showing {{filtered.length}} Persons

Violon exemple similaire . Crédits go to Pawel Kozlowski

713
répondu Wumms 2016-03-18 14:59:31
la source

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 dans la variable data et que vous filtrez les personnes en utilisant le modèle query , 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}} - gravures nombre total de personnes
  • {{(data|filter:query).length}} - gravures filtré nombre de personnes

Note cette solution fonctionne très bien si vous voulez utiliser des 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 montrer la longueur de la liste filtrée, je suggérerais d'utiliser alias expression (décrit ci-dessous) pour AngularJS 1.3+ ou le solution proposée par @Wumms pour la version AngularJS antérieure à 1.3.

nouvel élément dans L'angle 1.3

les créateurs AngularJS ont également remarqué que problème et dans la version 1.3 (beta 17) ils ont ajouté l'expression "alias" qui va stocker les résultats intermédiaires du répéteur après que les filtres ont été appliqués, par exemple

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

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

Le alias l'expression empêchera l'exécution de plusieurs filtres.

j'espère que ça aidera.

321
répondu Tom 2014-10-23 12:31:55
la source

ngRepeat crée une copie du tableau quand il applique un filtre, de sorte que vous ne pouvez pas utiliser le tableau source pour référencer seulement 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 $filter service:

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

  $scope.filteredData = myNormalData;

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

  // ...
}

et ensuite vous utilisez la propriété filteredData dans votre vue à la place. Voici un plongeur de travail: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

34
répondu Josh David Miller 2013-03-11 09:45:16
la source

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 l'expression d'alias optionnelle qui stockera alors l'intermédiaire résultats du répéteur après l'application des filtres. Généralement ce est utilisé pour afficher un message spécial lorsqu'un filtre est actif sur la répétition, mais la filtré jeu de résultats est vide.

Par exemple: la rubrique articles | filtre:x que les résultats de stocker les fragment des items répétés comme résultats, mais seulement après les items ont été traitées par le filtre.

29
répondu WelcomeTo 2014-08-03 17:44:27
la source

la façon la plus facile si vous avez

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

longueur des données filtrées

<div>{{ (data | filter: query).length }}</div>
29
répondu ionescho 2017-02-28 17:13:07
la source

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 une démo violon

24
répondu JeremyWeir 2015-04-22 20:36:50
la source

Voici l'exemple travaillé voir sur le piston

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

13
répondu Maksym 2013-03-10 03:52:50
la source

Vous pouvez le faire avec 2 voies . Dans modèle et dans Contrôleur . Dans template vous pouvez définir votre tableau filtré à une autre variable, puis l'utiliser comme vous voulez. 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, voir le AngularJs filtré compter exemples/demos

7
répondu Hazarapet Tunanyan 2016-06-02 06:11:04
la source

Autres questions sur javascript angularjs