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-switch
mit events.length
(wie überprüfe ich, ob ein Objekt und kein Array leer ist?), Aber ist das wirklich die einzige Option, die ich habe?
Antworten:
Sie können ngShow verwenden .
Siehe Beispiel .
Oder Sie können ngHide verwenden
Siehe Beispiel .
Für Objekte können Sie Object.keys testen .
quelle
ng-hide="hasEvents()"
.Und wenn Sie dies mit einer gefilterten Liste verwenden möchten, ist hier ein ordentlicher Trick:
quelle
filteredItems
und setzt ihren Wert auf(items | filter:keyword)
- mit anderen Worten, das vom Filter zurückgegebene Array"face in filteredFaces = faces|filter:{deleted: true} | orderBy:'text'
aber ich stimme allen zu, dies ist ein fabelhafter Trick.Sie können die Angular-UI-Direktive überprüfen,
ui-if
wenn Sie die nurul
aus dem DOM entfernen möchten, wenn die Liste leer ist:quelle
ng-hide
ohne Angular-UI verwenden, aber der Knoten wird nur ausgeblendet und nicht aus dem DOM-Baum entfernt. Mit derui-if
Direktive von angle-ui wird der DOM-Knoten entfernt. Sie müssen also mindestens dieui-if
Direktive aus dem Winkel-UI-Code zu Ihrem eigenen Code hinzufügen .ng-if
enthalten!ng-if
dass ein neuer Bereich erstellt wird, wo diesng-hide
nicht der Fall ist. Dies kann zu unerwartetem Verhalten führen.Bei den neueren Versionen von anglejs lautet die richtige Antwort auf diese Frage
ng-if
: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:
quelle
Dies ähnelt @Konrad 'ktoso' Malawski, ist aber etwas leichter zu merken.
Getestet mit Angular 1.4
quelle
ng-if='!filteredItems.length'
item in items | filter: ... | filter: ...
<li ng-if="!filteredItems.length">
item in (filteredItems = (items | filter: someFilter))
Hier ist ein anderer Ansatz, bei dem CSS anstelle von JavaScript / AngularJS verwendet wird.
CSS:
Markup:
Wenn die Liste leer ist, wird <li ng-repeat = "item in filteredItems"> usw. auskommentiert und wird zu einem Kommentar anstelle eines li-Elements.
quelle
Sie können diesen ng-Schalter verwenden:
quelle
Mit dem
as
Schlüsselwort können Sie eine Sammlung unter einemng-repeat
Element referenzieren :quelle
Ich benutze normalerweise ng-show
wo Variable Sie zum Beispiel definieren
quelle
Sie können ng-if verwenden, da dies nicht in der HTML-Seite gerendert wird und Sie Ihr HTML-Tag in inspect nicht sehen ...
quelle