À l'aide de ng-repeat et limitTo de limiter le nombre d'éléments visibles affiche

J'essaie de limiter mes ensembles de résultats pour un nombre fixe. Je peux utiliser limitTo avec ng-repeat, mais cela limite les objets indépendamment de leur visibilité et supprime les éléments du DOM. Je veux limiter à un certain nombre d'éléments visibles tout en gardant tout dans les DOM.

Voici le code actuel que j'ai. Mon objectif est de toujours montrer pas plus de 50 articles dans la liste même si items contient 500 articles.

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

Ce sera d'abord la limite de 50 éléments, mais si je filtre la liste (par modification d'article.visible sur certains éléments), la liste n'affiche jamais les éléments dans l'ordre de 50 - 500 et affiche plutôt moins de 50 articles. Quel est le bon moyen de limiter un ng-repeat de sorte qu'il ne prend en compte que les éléments visibles dans la limite de restriction?

InformationsquelleAutor Bill | 2013-10-25

68

Vous pouvez utiliser:
```
<div ng-repeat="item in items | filter:{visible: true} | limitTo: 50">
    <p>{{item.id}}</p>
</div>
```
filter:{visible: true} , vous obtiendrez une liste de tous les éléments visibles de

Vous pouvez prendre un coup d'oeil à la angularjs docu pour plus d'informations sur le filtre.
http://docs.angularjs.org/api/ng.filter:filter
- Ce n'est pas la même chose depuis des filtres de supprimer des éléments dans le DOM (comme ng-si), au lieu de simplement la modification de la visibilité (comme ng-show). Je suis à la recherche d'une solution qui fonctionne avec ng-show.
- Quelle est la raison pour laquelle vous souhaitez conserver les éléments cachés dans les DOM?
- Constamment l'ajout et la suppression d'eux est lente. Avec ng-show de l'expérience pour le filtrage est instantanée, avec ng-si il y a un léger hoquet avant la mise à jour des résultats sont affichés.
- J'ai créé un plunker. plnkr.co/modifier/TwdanjywAzUN4Oqcn06h?p=preview Pourriez-vous svp me montrer ce que tu veux dire par "léger hoquet avant la mise à jour des résultats sont présentés". Vous avez raison, l'ajout et la suppression d'éléments du dom est plus lent que de montrer/cacher.
- J'ai mis à jour plunker plnkr.co/modifier/JGYtnlb4UScemQ8hal1R?p=preview pour "trier" et "filtres" de la fonctionnalité qui est ce que je fais avec ma liste. Cependant, je ne peux pas obtenir plunker à travailler sur mon appareil mobile pour voir si elle fait montre le décalage je vois... en fait sur un Windows 8 téléphone je reçois environ 50 ms de retard à l'aide de ng-si et fondamentalement, pas de retard à l'aide de ng-show.
- Désolé, je ne savais pas que vous étiez à tester l'application sur un téléphone mobile. Vous avez raison sur les manipulations dom étant lente, il. J'ai mis à jour le plunker à utiliser ng-show. L'approche que j'utilise est très primitive, non testé et peut-être même plus lent qu'à l'aide de filtres. Ses plus de vous donner quelques idées sur la façon dont je voudrais essayer de résoudre ce problème. plnkr.co/modifier/g2KoyNN1Bs1M3NXJCaKB?p=preview (besoin de beaucoup de refactoring)
- Merci, je suppose que j'espérais qu'il y a une solution plus propre, mais je vais faire quelques test pour voir si je peux l'obtenir assez rapidement à l'aide de cette technique. Apprécions l'aide.
- Pour ce que ça vaut, vous pouvez essayer en utilisant la track by attribut dans ngRepeat. Vous pourriez faire track by item.id, de sorte que Angulaire peut ne pas avoir à reconstruire toutes les nœuds dom, lorsque l'ordre change. Il pourrait accélérer un peu les choses.
InformationsquelleAutor bekite
15

Il est également possible de faire de cette façon:
```
<div ng-repeat="item in items" ng-show="$index<50">
    <p>item.id</p>
</div>
```
- Cette méthode physiquement met le code HTML à la place. Si vous avez des enregistrements de 2000, 2000 divs tombé dans votre HTML mais pas vu. ng-if est légèrement meilleure en ce qu'elle vidage des commentaires au lieu de html, mais il serait encore mieux d'utiliser seulement la limitTo afin de ne pas imprimer du contenu supplémentaire pour le document
InformationsquelleAutor Kostyantyn
1

Il ya un couple d'approches, peut-être le plus réutilisable est pour vous de créer votre propre "visibles" filtre personnalisé qui semble pour l'attribut visible sur vos articles. Ensuite, vous pouvez la chaîne d'eux.
```
<div ng-repeat="item in items | visible | limitTo: 50">
```
Voici un lien pour créer des filtres personnalisés
- Est-il une solution qui n'a pas de supprimer des éléments dans le DOM? Je suis à la recherche de quelque chose qui fonctionne avec ng-show.
InformationsquelleAutor Dan Doyon
1

Vous pouvez utiliser ng-si avec $index pour spécifier DOM l'affichage. Génère encore ng-si des commentaires, mais ne charge pas l'objet de tellement d'amélioration de la performance remarqué.
```
<div ng-init="your.objects={{},{},{}}; your.max=10">
  <div ng-repeat="object in your.objects" ng-if="$index<your.max">
    {{object}}
  </div>
</div>
```
InformationsquelleAutor irth

Vous devez vous connecter pour publier un commentaire.