377 votes

Angulaire JS ng-repeat gérer le cas de liste vide

Je pensais que ce serait quelque chose de très commun, mais ne pouvait pas trouver la façon de le gérer en Angular JS. Disons que j'ai une liste d'événements et voulez leur sortie angulaire, alors c'est assez facile:

<ul>
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>

Mais comment dois-je traiter le cas lorsque la liste est vide? Je veux avoir une boîte de message dans le lieu où la liste est avec quelque chose comme "Non-événements" ou similaire. La seule chose qui serait proche est l' ng-switch avec events.length (comment puis-je vérifier si vide quand un objet et non pas un tableau?), mais est-ce vraiment la seule option que j'ai?

567voto

Artem Andreev Points 9057

Vous pouvez utiliser ngShow .

 <li ng-show="!events.length">No events</li>
 

Voir l' exemple

Ou vous pouvez utiliser ngHide

 <li ng-hide="events.length">No events</li>
 

Voir l' exemple

Pour l'objet, vous pouvez tester Object.keys .

367voto

Et si vous voulez utiliser ceci avec une liste filtrée, voici une astuce:

 <ul ng-repeat="item in filteredItems  = (items | filter:keyword)">
   ...
</ul> 
<div ng-hide="filteredItems.length">No items found</div>
 

29voto

Mortimer Points 2121

Vous pouvez consulter la directive angulaire-ui ui-if si vous voulez simplement supprimer le ul du DOM lorsque la liste est vide:

 <ul ui-if="!!events.length">
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X