angularjs - ng-repeat - content to show if array is empty or null -

angularjs - ng-repeat - content to show if array is empty or null -

i've deep nested ng-repeat lists, , in lastly loop i've display alternate content if list empty. i'm new angular, saw posts online please help me can utilize content if list empty. ng-repeat=sessions in day empty.

<ul class="day"> <li ng-repeat="sessions in day"> <ul class="table-view"> <li class="table-view-cell" ng-repeat="(heading, session) in sessions"> <span class="group">{{heading}}</span> <ul class="cell"> <li class="cell-content" ng-repeat="val in session" ng-click="getsession(val.id)"> <div class="time" style="background-color:#{{val.color}}"> <span>{{val.start | date:"h:mma"}}</span> <span>to</span> <span>{{val.end | date:"h:mma"}}</span> </div> <div class="session" ng-class-odd="'odd'" ng-class-even="'even'"> <span class="name">{{val.name}}</span> <span class="room">room: {{val.room}}</span> </div> </li> </ul> </li> </ul> </li> </ul>

1). css approach. utilize pure css approach in such cases. markup (stripped extra-html):

<ul class="day"> <li ng-repeat="sessions in day"> ... </li> <li class="no-sessions"> no sessions on day. </li> </ul>

and css rules hide .no-sessions li default , create visible if there no previous li tags:

li.no-sessions { display: block; } li + li.no-sessions { display: none; }

so when sessions array empty, there no li rendered , no-sessions 1 visible. , if hide there @ to the lowest degree 1 session on day.

demo: http://plnkr.co/edit/kqm9hfgttiplkdmeevdv?p=preview

2). ngif approach. of course of study can utilize ngif/ngshow directives show no-records element when sessions array empty:

<li ng-if="!day.length"> no sessions on day. </li>

angularjs ng-repeat