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    lt ul gt       lt li ng-repeat  event in events  gt   event title   lt  li gt   lt  ul gt    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

User · Accepted Answer

You can use ngShow    lt li ng-show   events length  gt No events lt  li gt    See example   Or you can use ngHide   lt li ng-hide  events length  gt No events lt  li gt    See example   For object you can test Object keys

User · Answer

i usually use ng-show    lt li ng-show  variable length  gt  lt  li gt    where variable you define for example    lt div class  list-group-item  ng-repeat  product in store products  gt      lt li ng-show  product length  gt show something lt  li gt   lt  div gt

User · Answer

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    lt ul ui-if    events length  gt       lt li ng-repeat  event in events  gt   event title   lt  li gt   lt  ul gt

User · Answer

lt ul gt       lt li ng-repeat  item in items   filter keyword as filteredItems  gt                   lt  li gt       lt li ng-if  filteredItems length   0  gt          No items found      lt  li gt   lt  ul gt    This is similar to  Konrad  ktoso  Malawski but slightly easier to remember   Tested with Angular 1 4

User · Answer

you can use ng-if because this is not render in html page and you dont see your html tag in inspect      lt ul ng-repeat  item in items  ng-if  items length  gt  0  gt       lt li gt   item   lt li gt   lt  ul gt   lt div class  alert alert-info  gt there is no items  lt  div gt

User · Answer

And if you want to use this with a filtered list here s a neat trick    lt ul gt       lt li ng-repeat  item in filteredItems     items   filter keyword   gt                   lt  li gt   lt  ul gt   lt div ng-hide  filteredItems length  gt No items found lt  div gt

User · Answer

You can use this ng-switch    lt div ng-app ng-controller  friendsCtrl  gt     lt label gt Search   lt  label gt  lt input ng-model  searchText  type  text  gt     lt div ng-init  filtered    friends   filter searchText   gt     lt h3 gt  Found     friends   filter searchText  length   friends lt  h3 gt     lt div ng-switch   friends   filter searchText  length  gt       lt span class  ng-empty  ng-switch-when  0  gt No friends lt  span gt       lt table ng-switch-default gt         lt thead gt             lt tr gt             lt th gt Name lt  th gt             lt th gt Phone lt  th gt           lt  tr gt         lt  thead gt         lt tbody gt         lt tr ng-repeat  friend in friends   filter searchText  gt           lt td gt   friend name   lt  td gt           lt td gt   friend phone   lt  td gt         lt  tr gt       lt  tbody gt     lt  table gt   lt  div gt

User · Answer

Here s a different approach using CSS instead of JavaScript AngularJS   CSS    emptymsg     display  list-item     li    emptymsg     display  none      Markup    lt ul gt       lt li ng-repeat  item in filteredItems  gt       lt  li gt       lt li class  emptymsg  gt No items found lt  li gt   lt  ul gt    If the list is empty   lt li ng-repeat  item in filteredItems    etc  will get commented out and will become a comment instead of a li element

User · Answer

With the newer versions of angularjs the correct answer to this question is to use ng-if    lt ul gt     lt li ng-if  list length     0  gt   No items in this list yet    lt  li gt     lt li ng-repeat  item in list  gt    item    lt  li gt   lt  ul gt    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       lt li ng-if   list  gt   Loading      lt  li gt

User · Answer

You can use as keyword to refer a collection under a ng-repeat element    lt table gt       lt tr ng-repeat  task in tasks   filter category   filter query as res  gt           lt td gt   task id   lt  td gt           lt td gt   task description   lt  td gt       lt  tr gt       lt tr ng-if  res length     0  gt           lt td colspan  2  gt no results lt  td gt       lt  tr gt   lt  table gt

[javascript] AngularJS ng-repeat handle empty list case

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-ng-repeat

Examples related to angularjs-ng-show