AngularJS ng-repeat handle empty list case AngularJS ng-repeat handle empty list case angularjs angularjs

AngularJS ng-repeat handle empty list case


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.


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>


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>