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: groups.google.com/d/topic/angular/wR06cN5oVBQ/discussion — Mark Rajcok
– Mark Rajcok, Commented Sep 10, 2012 at 15:49

Community · Accepted Answer · 2017-05-23 12:10:27Z

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, 2017 at 12:10

CommunityBot

11 silver badge

answered Sep 9, 2012 at 17:19

Artem Andreev

19.9k5 gold badges46 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Rob Juurlink Over a year ago

Indeed @ArtemAndreev. When "events" is an empty array, it returns true even though the array is empty

Dani Over a year ago

I think there's a problem with Object.keys: jsfiddle.net/J9b5z, how would you handle this?

David Duman Over a year ago

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.

Aru S Over a year ago

@Dani try adding a function to your controller that performs the test. You can then just invoked the directive with ng-hide="hasEvents()".

Dani Over a year ago

Yes, thanks. However, I hoped there would be a more elegant way without "polluting" the controller.

|

Jim Buck · Accepted Answer · 2015-10-01 17:14:29Z

371

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 1, 2015 at 17:14

Jim Buck

2,44426 silver badges42 bronze badges

answered Sep 3, 2013 at 13:00

Konrad 'ktoso' Malawski

13.2k3 gold badges49 silver badges53 bronze badges

8 Comments

ravishi Over a year ago

Very useful. Typo though with "filteredFragments".

M.K. Safi Over a year ago

Sweet! The expression inside ng-repeat looks strange though. Any chance you could explain it? Thanks!!

Alex Over a year ago

@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

markmarijnissen Over a year ago

YES! Ninja plus points! This saves angular from evaluating a complex filter twice!

Fitter Man Over a year ago

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.

|

Mortimer · Accepted Answer · 2012-12-01 21:40:23Z

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 1, 2012 at 21:40

Mortimer

2,97425 silver badges25 bronze badges

5 Comments

Prinzhorn Over a year ago

Thanks. Feels cleaner than just hiding it.

Shibbir Ahmed Over a year ago

@Mortimer: so in this case do we need angular-ui?

Mortimer Over a year ago

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.

markmarijnissen Over a year ago

newest angular has ng-if included!

Arnold Daniels Over a year ago

Note that ng-if is creating a new scope, where ng-hide isn't. This might cause unexpected behavior.

cameck · Accepted Answer · 2017-11-02 14:20:20Z

29

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>

edited Nov 2, 2017 at 14:20

cameck

2,09822 silver badges34 bronze badges

answered Jan 2, 2015 at 7:49

Pylinux

12k4 gold badges67 silver badges70 bronze badges

Comments

Bernard · Accepted Answer · 2015-10-20 03:16:12Z

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, 2015 at 3:16

answered Oct 6, 2015 at 1:14

Bernard

17.5k13 gold badges67 silver badges69 bronze badges

5 Comments

abrunet Over a year ago

You mean ng-if='!filteredItems.length'

Jordash Over a year ago

How do you do this with multiple filters?

Bernard Over a year ago

@Jordash Just keep piping them item in items | filter: ... | filter: ...

Matty J Over a year ago

A nice, further refinement is <li ng-if="!filteredItems.length">

Firze Over a year ago

This is great. I have been using a lot dirtyer method before like item in (filteredItems = (items | filter: someFilter))

Peter Mortensen · Accepted Answer · 2016-02-18 02:03:56Z

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, 2016 at 2:03

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 9, 2016 at 4:57

Miriam Salzer

1,2421 gold badge12 silver badges16 bronze badges

3 Comments

Prinzhorn Over a year ago

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.

Miriam Salzer Over a year ago

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

Jon Combe Over a year ago

A few months late, granted, but I agree with Miriam, I think this answer is genius.

Daniel F · Accepted Answer · 2015-10-11 21:46:45Z

2

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>

edited Oct 11, 2015 at 21:46

Daniel F

14.3k15 gold badges96 silver badges130 bronze badges

answered Oct 9, 2015 at 13:35

LukitaBrands

213 bronze badges

Comments

Damian Czapiewski · Accepted Answer · 2019-02-22 21:33:11Z

2

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>

answered Feb 22, 2019 at 21:33

Damian Czapiewski

8897 silver badges24 bronze badges

Comments

Ezequiel García · Accepted Answer · 2016-03-20 03:33:22Z

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, 2016 at 3:33

Ezequiel García

2,81621 silver badges13 bronze badges

Comments

pejman · Accepted Answer · 2016-12-25 16:34:47Z

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, 2016 at 16:34

pejman

8088 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-repeat handle empty list case

10 Answers 10

7 Comments

8 Comments

5 Comments

Comments

5 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

7 Comments

8 Comments

5 Comments

Comments

5 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related