Myślałem, że będzie to bardzo powszechna sprawa, ale nie mogłem znaleźć sposobu, aby sobie z tym poradzić w AngularJS. Załóżmy, że mam listę zdarzeń i chcę wyprowadzić je za pomocą AngularJS, więc to całkiem proste:
<ul>
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
Ale jak poradzić sobie ze sprawą, gdy lista jest pusta? Chcę mieć okno komunikatu w miejscu, w którym znajduje się lista z napisem „Brak zdarzeń” lub podobnym. Jedyne, co by się zbliżyło, to ng-switch
z events.length
(jak sprawdzić, czy pusty, gdy obiekt, a nie tablica?), Ale czy to naprawdę jedyna dostępna opcja?
Odpowiedzi:
Możesz użyć ngShow .
Patrz przykład .
Lub możesz użyć ngHide
Patrz przykład .
Dla obiektu możesz przetestować Object.keys .
źródło
ng-hide="hasEvents()"
.A jeśli chcesz użyć tego z filtrowaną listą, oto fajna sztuczka:
źródło
filteredItems
i ustawia jej wartość na(items | filter:keyword)
- innymi słowy, tablicę zwróconą przez filtr"face in filteredFaces = faces|filter:{deleted: true} | orderBy:'text'
ale zgadzam się ze wszystkimi, to fantastyczna sztuczka.Możesz chcieć sprawdzić dyrektywę angular-ui,
ui-if
jeśli chcesz tylko usunąćul
z DOM, gdy lista jest pusta:źródło
ng-hide
bez interfejsu kątowego, ale po prostu ukryje on węzeł, nie usunie go z drzewa DOM. Dziękiui-if
dyrektywie angular-ui usunie węzeł DOM. Musisz więc przynajmniej dodaćui-if
dyrektywę z kodu angular-ui do własnego kodu.ng-if
zawarł!ng-if
tworzy nowy zakres, gdzieng-hide
nie ma. Może to spowodować nieoczekiwane zachowanie.W nowszych wersjach angularjs poprawną odpowiedzią na to pytanie jest
ng-if
:To rozwiązanie nie będzie migotać, gdy lista ma zostać pobrana, ponieważ lista musi zostać zdefiniowana, a jej długość musi wynosić 0.
Oto plunker, aby pokazać go w użyciu: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview
Wskazówka: Możesz także wyświetlić ładujący się tekst lub pokrętło:
źródło
Jest to podobne do @Konrad „ktoso” Malawski, ale nieco łatwiejsze do zapamiętania.
Testowane z Angular 1.4
źródło
ng-if='!filteredItems.length'
item in items | filter: ... | filter: ...
<li ng-if="!filteredItems.length">
item in (filteredItems = (items | filter: someFilter))
Oto inne podejście przy użyciu CSS zamiast JavaScript / AngularJS.
CSS:
Narzut:
Jeśli lista jest pusta, <li ng-repeat = "item in filterItems"> itp. Zostanie skomentowany i stanie się komentarzem zamiast elementu li.
źródło
Możesz użyć tego przełącznika ng:
źródło
Możesz użyć
as
słowa kluczowego, aby skierować kolekcję podng-repeat
element:źródło
zwykle używam ng-show
gdzie zmienna jest zdefiniowana na przykład
źródło
możesz użyć ng-if, ponieważ nie jest to renderowane na stronie HTML i nie widzisz swojego znacznika HTML w inspekcji ...
źródło