AngularJS ng-repeat behandelt leeren Listenfall

Ich dachte, das wäre eine sehr häufige Sache, aber ich konnte in AngularJS nicht finden, wie ich damit umgehen sollte. Angenommen, ich habe eine Liste von Ereignissen und möchte sie mit AngularJS ausgeben. Dann ist das ziemlich 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 so etwas wie "Keine Ereignisse" oder ähnliches enthält. Das einzige, was nahe kommen würde, ist das ng-switchmit events.length(wie überprüfe ich, ob ein Objekt und kein Array leer ist?), Aber ist das wirklich die einzige Option, die ich habe?

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 Objekte können Sie Object.keys testen .

Und wenn Sie dies mit einer gefilterten Liste verwenden möchten, ist hier ein ordentlicher 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 Angular-UI-Direktive überprüfen, ui-ifwenn Sie die nur ulaus 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>

Bei 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 auch nicht, wenn die Liste heruntergeladen werden soll, da die Liste definiert werden muss und eine Länge von 0 hat, damit die Nachricht angezeigt wird.

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

Tipp: Sie können auch einen Ladetext oder einen Spinner anzeigen:

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

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

Getestet mit Angular 1.4

Hier ist ein anderer Ansatz, bei dem CSS anstelle von JavaScript / AngularJS verwendet wird.

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, wird <li ng-repeat = "item in filteredItems"> usw. auskommentiert und wird zu einem Kommentar anstelle eines li-Elements.

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>

Mit dem asSchlüsselwort können Sie eine Sammlung unter einem ng-repeatElement referenzieren :

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

Ich benutze normalerweise ng-show

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

wo Variable Sie zum Beispiel definieren

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

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>