Angularjs ng-repeat handle empty list case

Nailing the basics

When dealing with an empty list, consider these basic strategies:

• Display an empty list message: Use ng-show="!myList.length" to show a message if the list is empty.
• Hide message when not empty: Define ng-hide="myList.length" on your message to hide it when the list has items.

Got an empty object? No problem! Check its emptiness with Object.keys(myObject).length === 0.

Show loading states

Indicate a loading state when fetching data asynchronously:

<div ng-if="myList === null">Loading... Since waiting is boring, why not get some coffee? ☕</div>


Filtering and customized messaging

Applying filters to a list and displaying corresponding messages can enhance UX:

<div ng-if="filteredItems.length === 0">No items match your filter.</div>
<ul>
  <li ng-repeat="item in filteredItems">{{ item.name }}</li>
</ul>


Going above and beyond

Tweak UX in empty states

Creating a seamless user experience, despite an empty list, is vital:

• Dynamic placeholders: Display placeholders to indicate that data is being fetched.
• Graceful degradation: Inform users if the list is intentionally empty.
• Contextual Feedback: Customize the empty state message to the specific situation.

Improve efficiency

Using ng-if can prevent unnecessary DOM manipulations. It adds or removes elements only when necessary:

// DOM elements go on vacation when not needed  🍹🏝️
<div ng-if="itemsAreLoading">Loading...</div>
<div ng-repeat="item in myList"></div>


Filtering and conditional display

Implementing ng-hide based on the length of the filtered list makes lists responsive to search filters:

// Like finding a book in a library 📚🕵️‍♀️
<input type="text" ng-model="search">
<div ng-repeat="item in myList | filter:search">
  {{ item.name }}
</div>
<div ng-hide="(myList | filter:search).length">No results found. Maybe it's time to invent it!</div>


Custom AngularJS filters

Custom filters can clarify list handling and can be combined with ng-show or ng-hide:

// Custom filter - Like a bouncer for your list items 🚪💪
app.filter('emptyFilter', function() {
  return function(list) {
    return list.some(item => /* checks on item */);
  };
});


Then, apply it:

<div ng-show="!myList | emptyFilter">List is empty. Maybe it went to watch Netflix! 📺</div>
