web-dev-qa-db-fra.com

Utiliser ng-repeat et limitTo pour limiter le nombre d'éléments visibles affichés

J'essaie de limiter mes jeux de résultats à un nombre fixe. Je peux utiliser limitTo avec ng-repeat, mais cela limite les éléments quelle que soit leur visibilité actuelle et supprime les éléments du DOM. Je veux limiter à un nombre d'éléments visibles tout en conservant tout dans le DOM.

Voici le code actuel que j'ai. Mon objectif est de ne pas afficher plus de 50 éléments dans la liste, même si items contient 500 éléments.

<div ng-repeat="item in items | limitTo: 50">
  <div ng-show="item.visible">
    <p>item.id</p>
  </div>
</div>

Cela se limitera initialement à 50 éléments, mais si je filtre la liste (en modifiant item.visible sur certains éléments), la liste n'indique jamais les éléments compris entre 50 et 500, mais moins de 50. Quelle est la bonne façon de limiter un ng-repeat afin qu'il ne compte que les éléments visibles dans la limite?

javascriptangularjsangularjs-ng-repeat
46
Bill

Vous pouvez utiliser:

<div ng-repeat="item in items | filter:{visible: true} | limitTo: 50">
    <p>{{item.id}}</p>
</div>

filter:{visible: true} retournera une liste de tous les éléments visibles

Vous pouvez consulter le document angularjs pour plus d'informations sur le filtre. http://docs.angularjs.org/api/ng.filter:filter

69
bekite

Il est également possible de le faire de cette façon:

<div ng-repeat="item in items" ng-show="$index<50">
    <p>item.id</p>
</div>
15
Kostyantyn

Vous pouvez utiliser ng-if avec $ index pour spécifier un affichage DOM. Génère toujours des commentaires ng-if mais ne charge pas l’objet tant la performance améliorée a été remarquée.

<div ng-init="your.objects={{},{},{}}; your.max=10">
  <div ng-repeat="object in your.objects" ng-if="$index<your.max">
    {{object}}
  </div>
</div>
1
irth

Il existe plusieurs approches, la plus réutilisable étant peut-être de créer votre propre filtre personnalisé 'visible' qui recherche un attribut visible sur vos éléments. Ensuite, vous pouvez les enchaîner.

<div ng-repeat="item in items | visible | limitTo: 50">

Voici un lien SO pour créer des filtres personnalisés

1
Dan Doyon