web-dev-qa-db-fra.com

AngularJS ng-repeat gère la liste vide

Je pensais que ce serait une chose très commune, mais je ne trouvais pas 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 à la place où la liste est avec quelque chose comme "Aucun événement" ou similaire. La seule chose qui pourrait se rapprocher est le ng-switch avec events.length (comment puis-je vérifier s'il est vide lorsqu'un objet et non un tableau?), Mais est-ce vraiment la seule option que j'ai?

javascriptangularjsangularjs-ng-repeatangularjs-ng-show
376
Prinzhorn

Vous pouvez utiliser ngShow .

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

Voir exemple .

Ou vous pouvez utiliser ngHide

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

Voir exemple .

Pour objet, vous pouvez tester Object.keys .

567
Artem Andreev

Et si vous voulez utiliser ceci 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>
366
Konrad 'ktoso' Malawski

Vous voudrez peut-être consulter le directive angular-uiui-if si vous souhaitez 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>
29
Mortimer

Avec les nouvelles versions de angularjs, la bonne réponse à cette question consiste à 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 clignote pas lorsque la liste est sur le point d'être téléchargée, car la liste doit être définie et avoir une longueur de 0 pour que le message puisse s'afficher.

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

Astuce: vous pouvez également afficher un texte de chargement ou un cahier:

_  <li ng-if="!list">( Loading... )</li>
_
29
Pylinux
<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

23
Bernard

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 dans les éléments filtrés">, etc., sera mis en commentaire et deviendra un commentaire au lieu d'un élément li.

6
Miriam Salzer

Vous pouvez utiliser ce commutateur ng:

<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>
2
LukitaBrands

Vous pouvez utiliser le mot clé as pour faire référence à une collection sous un élément ng-repeat:

<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>
1
Damian Czapiewski

vous pouvez utiliser ng-if parce que ce n'est pas rendu en page HTML et que vous ne voyez pas votre balise html dans inspecter ...

<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>
0
user7339584

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>
0
Ezequiel García