AngularJS ng-repeat handle empty list case

Question

I thought this would be a very common thing, but I couldn't find how to handle it in AngularJS. Let's say I have a list of events and want to output them with AngularJS, then that's pretty easy:

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

But how do I handle the case when the list is empty? I want to have a message box in place where the list is with something like "No events" or similar. The only thing that would come close is the ng-switch with events.length (how do I check if empty when an object and not an array?), but is that really the only option I have?

@Artem's answer is good (+1). Here's a google group discussion that uses a filter, for reference/comparison: https://groups.google.com/d/topic/angular/wR06cN5oVBQ/discussion — Mark Rajcok, Sep 10 '12 at 15:49

score 571 · Accepted Answer · edited May 23 '17 at 12:10

571

You can use ngShow.

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

See example.

Or you can use ngHide

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

See example.

For object you can test Object.keys.

edited May 23 '17 at 12:10

Community

1
1

answered Sep 09 '12 at 17:19

Artem Andreev

19,942
5
43
42

1

Indeed @ArtemAndreev. When "events" is an empty array, it returns true even though the array is empty – Rob Juurlink May 15 '13 at 12:33
I think there's a problem with Object.keys: http://jsfiddle.net/J9b5z/, how would you handle this? – Dani Jun 10 '13 at 20:34
5

nh-show worked id my case but it doesnt update the state when I put a filter in and nothing returned. Also the object appears on first load and disappears when the repeat process done on page load. – dvdmn Jun 13 '13 at 12:54
1

@Dani try adding a function to your controller that performs the test. You can then just invoked the directive with `ng-hide="hasEvents()"`. – Mr. S Aug 23 '13 at 20:23
Yes, thanks. However, I hoped there would be a more elegant way without "polluting" the controller. – Dani Aug 27 '13 at 14:05
What if I use loads of filter in ng-repeat? – tom10271 Aug 24 '15 at 10:02
As @RobJuurlink pointed out this won't work as expected. I think **ng-show="events.length < 1"** or **ng-hide="events.length > 1"** would be a better solution. – Ingadi Jun 06 '16 at 18:16

score 372 · Answer 2 · edited Oct 01 '15 at 17:14

372

And if you want to use this with a filtered list here's a neat trick:

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

edited Oct 01 '15 at 17:14

Jim Buck

2,383
23
42

answered Sep 03 '13 at 13:00

Konrad 'ktoso' Malawski

13,102
3
47
52

3

Very useful. Typo though with "filteredFragments". – ravishi Sep 04 '13 at 20:26
1

Sweet! The expression inside ng-repeat looks strange though. Any chance you could explain it? Thanks!! – M.K. Safi Dec 12 '13 at 14:03
7

@MKSafi, it is creating a new variable on the scope called `filteredItems` and setting its value to `(items | filter:keyword)` - in other words, the array returned by the filter – Alex Jan 14 '14 at 16:26
17

YES! Ninja plus points! This saves angular from evaluating a complex filter twice! – markmarijnissen Mar 19 '14 at 19:40
This duplicates the filtered list though, right? Could cause slowness depending on how big your list is and what's in it. Or does Angular already save the filtered list in memory, so now you're just saving a reference to it in the scope so you can access it later? – colllin Nov 02 '14 at 18:35
What's the scope of the variable that's created? I'd like to use it to disable a div that contains the list. The contain div doesn't seem to be able to access the variable. – Fitter Man Feb 17 '15 at 23:01
2

Also, there seem to be some limitations around this with multiple filters, like `"face in filteredFaces = faces|filter:{deleted: true} | orderBy:'text'` but I agree with everyone, this is a fabulous trick. – Fitter Man Feb 17 '15 at 23:12
1
Nice trick, but I'm curious why the whole
- -Element is repeated here?
– Mitja Jul 21 '15 at 13:49

score 29 · Answer 3 · answered Dec 01 '12 at 21:40

29

You might want to check out the angular-ui directive ui-if if you just want to remove the ul from the DOM when the list is empty:

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

answered Dec 01 '12 at 21:40

Mortimer

2,966
23
24

1

Thanks. Feels cleaner than just hiding it. – Prinzhorn Dec 02 '12 at 08:46
@Mortimer: so in this case do we need angular-ui? – Shibbir Ahmed Mar 05 '13 at 12:27
you can use `ng-hide` without angular-ui, but it will just hide the node, it won't remove it from the DOM tree. With angular-ui's `ui-if` directive, it will remove the DOM node. So, you need to at least add the `ui-if` directive from the angular-ui code to your own code. – Mortimer Mar 05 '13 at 13:11
21

newest angular has `ng-if` included! – markmarijnissen Mar 19 '14 at 19:41
4

Note that `ng-if` is creating a new scope, where `ng-hide` isn't. This might cause unexpected behavior. – Arnold Daniels Feb 18 '15 at 14:57

score 29 · Answer 4 · edited Nov 02 '17 at 14:20

With the newer versions of angularjs the correct answer to this question is to use 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>

This solution will not flicker when the list is about to download either because the list has to be defined and with a length of 0 for the message to display.

Here is a plunker to show it in use: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview

Tip: You can also show a loading text or spinner:

  <li ng-if="!list">( Loading... )</li>

Bernard · Answer 5 · 2015-10-20T03:16:12.427

23

<ul>
    <li ng-repeat="item in items | filter:keyword as filteredItems">
        ...
    </li>
    <li ng-if="filteredItems.length===0">
        No items found
    </li>
</ul>

This is similar to @Konrad 'ktoso' Malawski but slightly easier to remember.

Tested with Angular 1.4

edited Oct 20 '15 at 03:16

answered Oct 06 '15 at 01:14

Bernard

16,149
12
63
66

3

You mean `ng-if='!filteredItems.length'` – abrunet Oct 19 '15 at 16:21
How do you do this with multiple filters? – Jordash May 19 '16 at 20:22
@Jordash Just keep piping them `item in items | filter: ... | filter: ...` – Bernard May 19 '16 at 23:59
A nice, further refinement is `
`

Matty J

Nov 03 '16 at 00:18

This is great. I have been using a lot dirtyer method before like `item in (filteredItems = (items | filter: someFilter))` – Firze Aug 25 '17 at 08:38

score 6 · Answer 6 · edited Feb 18 '16 at 02:03

6

Here's a different approach using CSS instead of 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>

If the list is empty, <li ng-repeat="item in filteredItems">, etc. will get commented out and will become a comment instead of a li element.

edited Feb 18 '16 at 02:03

Peter Mortensen

30,738
21
105
131

answered Jan 09 '16 at 04:57

Miriam Salzer

1,242
1
12
16

Question says "I want to have a message box in place where the list is". I also think it's disadvantageous to separate the logic into s stylesheet. Hard to maintain and asking for trouble. – Prinzhorn Jan 10 '16 at 09:19
1

@Prinzhorn, I think using CSS is an advantage because the logic is very simple and easy to maintain, the CSS is reusable for other lists, and it doesn't rely on JavaScript. No additional listeners or watchers are needed. The message could be styled to look like a box, I just didn't to keep the answer simple. – Miriam Salzer Jan 11 '16 at 05:51
A few months late, granted, but I agree with Miriam, I think this answer is genius. – Jon Combe Nov 25 '16 at 06:45

score 2 · Answer 7 · edited Oct 11 '15 at 21:46

You can use this ng-switch:

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

score 2 · Answer 8 · answered Feb 22 '19 at 21:33

You can use as keyword to refer a collection under a ng-repeat element:

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

score 0 · Answer 9 · answered Mar 20 '16 at 03:33

0

i usually use ng-show

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

where variable you define for example

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

answered Mar 20 '16 at 03:33

Ezequiel García

2,616
19
12

score 0 · Answer 10 · answered Dec 25 '16 at 16:34

0

you can use ng-if because this is not render in html page and you dont see your html tag in inspect...

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

answered Dec 25 '16 at 16:34

pejman

740
7
13

AngularJS ng-repeat handle empty list case

10 Answers10

Linked