Astuce AngularJS – Restreindre les resultats d’un ng-repeat

La directive ng-repeat

Pour rappel, la directive ng-repeat se présente de la manière suivante (En écrivant ce code, vous afficherez tous les éléments du tableau items) :

<div ng-repeat="item in items">{{item}}</div>

AngularJS propose le filtre limitTo

Vous pouvez restreindre le nombre de résultats à afficher en utilisant le filtre limitTo. En précisant un nombre positif, vous obtiendrez les n premiers résultats :

<div ng-repeat="item in items | limitTo:10">{{item}}</div>

Et en précisant un nombre négatif, vous obtiendrez les n derniers résultats :

<li ng-repeat="item in items | limitTo:-10">{{item}}</li>

Mais ce que peu de gens savent, et c’est là qu’est l’astuce, c’est que l’on peut enchainer deux limitTo pour obtenir un intervalle ! Dans l’exemple suivant, seront affichés les résultats de 6 à 10 (les 5 derniers des 10 premiers) :

<div ng-repeat="item in items | limitTo:10 | limitTo:-5">{{item}}</div>

J’ai trouvé cette astuce sur le site stackoverflow. Pour en savoir plus sur le filtre limitTo, vous pouvez vous rendre sur la documentation officielle (en anglais).

Share Button

4 thoughts on “Astuce AngularJS – Restreindre les resultats d’un ng-repeat

  1. Du coup, ça veut dire qu’on peut faire une pagination avec cette astuce: on fait grandir le premier limitTo en fonction de la page et on met le deuxième limitTo au nombre d’élément par page qu’on veut afficher
    {{item}}
    À moins qu’il y ait une meilleure façon de gérer la pagination avec angular ?

    • Oula, mon code HTML a été un peut mangé… pouvez-vous corriger ça en éditant mon commentaire ? :-/

      • Jordi Maylin

        Tout ce que je vois dans la source de ton commentaire c’est {{item}}, il manque autre chose ?

    • Jordi Maylin

      C’est un possibilité, mais ça implique que tous les résultats soient déjà dans le tableau items, ce qui n’est pas forcement envisageable si l’on en a beaucoup.
      Une meilleure manière de faire serait de charger, à chaque changement de « page », les nouveaux résultats via une requête ajax. Le tableau items ne contiendrait ainsi que les résultats de la page actuelle.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>