wake-up-neo.com

AngularJS ng-repeat handle leerer Listenfall

Ich dachte, das wäre eine sehr häufige Sache, aber ich konnte in AngularJS nicht herausfinden, wie ich damit umgehen soll. Nehmen wir an, ich habe eine Liste von Ereignissen und möchte sie mit AngularJS ausgeben. Dann ist das ganz einfach:

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

Aber wie gehe ich mit dem Fall um, wenn die Liste leer ist? Ich möchte ein Meldungsfeld haben, in dem die Liste "Keine Ereignisse" oder ähnliches enthält. Das einzige, was nahe kommen würde, ist der ng-switch mit events.length (wie überprüfe ich, ob bei einem Objekt und nicht bei einem Array leer ist?), Aber ist das wirklich die einzige Option, die ich habe?

376
Prinzhorn

Sie können ngShow verwenden.

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

Siehe Beispiel .

Oder Sie können ngHide verwenden

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

Siehe Beispiel .

Für Objekt können Sie Object.keys testen.

567
Artem Andreev

Und wenn Sie dies mit einer gefilterten Liste verwenden möchten, ist dies ein netter Trick:

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

Sie können die angle-ui-Direktiveui-if auschecken, wenn Sie nur ul aus dem DOM entfernen möchten, wenn die Liste leer ist:

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

In den neueren Versionen von anglejs lautet die richtige Antwort auf diese Frage 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>
_

Diese Lösung flackert nicht, wenn die Liste heruntergeladen werden soll, da die Liste definiert und mit einer Länge von 0 versehen sein muss, damit die Nachricht angezeigt wird.

Hier ist ein Plunker, um es in Gebrauch zu zeigen: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview

Tipp: Sie können auch einen Ladetext oder ein Drehfeld anzeigen:

_  <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>

Dies ähnelt @Konrad 'ktoso' Malawski, ist jedoch etwas leichter zu merken.

Getestet mit Angular 1.4

23
Bernard

Hier ist ein anderer Ansatz mit CSS anstelle von JavaScript/AngularJS.

CSS:

.emptymsg {
  display: list-item;
}

li + .emptymsg {
  display: none;
}

Markup:

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

Wenn die Liste leer ist, werden <li ng-repeat = "item in filtersItems"> usw. auskommentiert und werden zu einem Kommentar anstelle eines li-Elements.

6
Miriam Salzer

Sie können diesen ng-Schalter verwenden:

<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

Sie können das Schlüsselwort as verwenden, um auf eine Sammlung unter einem ng-repeat -Element zu verweisen:

<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

sie können ng-if verwenden, da dies nicht in der HTML-Seite gerendert wird und Sie Ihr HTML-Tag in inspect nicht sehen ...

<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

ich benutze normalerweise ng-show

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

wo Variable, die Sie zum Beispiel definieren

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