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

Question

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?

Answer 1

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 .

Answer 2

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>
 

Answer 3

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>