AngularJS ng-repeat handle cas de liste vide

Je pensais que ce serait une chose très courante, mais je n'ai pas trouvé comment le gérer dans AngularJS. Disons que j'ai une liste d'événements et que je veux les sortir avec AngularJS, alors c'est assez simple:

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

Mais comment gérer le cas lorsque la liste est vide? Je veux avoir une boîte de message en place où la liste est avec quelque chose comme "Aucun événement" ou similaire. La seule chose qui se rapprocherait est le ng-switchavec events.length(comment puis-je vérifier s'il est vide quand un objet et non un tableau?), Mais est-ce vraiment la seule option que j'ai?

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 objet, vous pouvez tester Object.keys .

Et si vous souhaitez l'utiliser avec une liste filtrée, voici une astuce intéressante:

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

Vous voudrez peut-être consulter la directive angular-ui ui-if si vous souhaitez simplement supprimer le uldu DOM lorsque la liste est vide:

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

Avec les nouvelles versions d'angularjs, la bonne réponse à cette question est d'utiliser ng-if:

<ul>
  <li ng-if="list.length === 0">( No items in this list yet! )</li>
  <li ng-repeat="item in list">{{ item }}</li>
</ul>

Cette solution ne scintillera pas non plus lorsque la liste est sur le point d'être téléchargée car la liste doit être définie et d'une longueur de 0 pour que le message s'affiche.

Voici un plongeur pour le montrer en cours d'utilisation: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview

Conseil: vous pouvez également afficher un texte de chargement ou une double flèche:

  <li ng-if="!list">( Loading... )</li>

<ul>
    <li ng-repeat="item in items | filter:keyword as filteredItems">
        ...
    </li>
    <li ng-if="filteredItems.length===0">
        No items found
    </li>
</ul>

Ceci est similaire à @Konrad 'ktoso' Malawski mais légèrement plus facile à retenir.

Testé avec Angular 1.4

Voici une approche différente en utilisant CSS au lieu de JavaScript / AngularJS.

CSS:

.emptymsg {
  display: list-item;
}

li + .emptymsg {
  display: none;
}

Balisage:

<ul>
    <li ng-repeat="item in filteredItems"> ... </li>
    <li class="emptymsg">No items found</li>
</ul>

Si la liste est vide, <li ng-repeat = "item in filtersItems">, etc. sera mis en commentaire et deviendra un commentaire au lieu d'un élément li.

Vous pouvez utiliser ce ng-switch:

<div ng-app ng-controller="friendsCtrl">
  <label>Search: </label><input ng-model="searchText" type="text">
  <div ng-init="filtered = (friends | filter:searchText)">
  <h3>'Found '{{(friends | filter:searchText).length}} friends</h3>
  <div ng-switch="(friends | filter:searchText).length">
    <span class="ng-empty" ng-switch-when="0">No friends</span>
    <table ng-switch-default>
      <thead>  
        <tr>
          <th>Name</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
      <tr ng-repeat="friend in friends | filter:searchText">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
      </tr>
    </tbody>
  </table>
</div>

Vous pouvez utiliser un asmot-clé pour référencer une collection sous un ng-repeatélément:

<table>
    <tr ng-repeat="task in tasks | filter:category | filter:query as res">
        <td>{{task.id}}</td>
        <td>{{task.description}}</td>
    </tr>
    <tr ng-if="res.length === 0">
        <td colspan="2">no results</td>
    </tr>
</table>

j'utilise habituellement ng-show

<li ng-show="variable.length"></li>

où variable vous définissez par exemple

<div class="list-group-item" ng-repeat="product in store.products">
   <li ng-show="product.length">show something</li>
</div>

vous pouvez utiliser ng-if car ce n'est pas le rendu dans la page html et vous ne voyez pas votre balise html dans inspect ...

<ul ng-repeat="item in items" ng-if="items.length > 0">
    <li>{{item}}<li>
</ul>
<div class="alert alert-info">there is no items!</div>