14

I've a deep nested ng-repeat lists, and only in the last loop I've to display alternate content if list was empty. I'm new to angular, saw some posts online please help me where can I use content if list is empty. The ng-repeat=sessions in day could be 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>
Improve this question

3 Answers 3

Reset to default
34

1). CSS approach. I usually use pure CSS approach in such cases. With this markup (stripped extra-html):

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

and CSS rules to hide .no-sessions li by default and make it visible only if there are no previous li tags:

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

So when sessions array is empty, there will be no li rendered and only no-sessions one will be visible. And if will hide as soon as there is at least one session on this day.

Demo: http://plnkr.co/edit/KqM9hfgTTiPlkdmEevDv?p=preview

2). ngIf approach. Of course you can use ngIf/ngShow directives for show no-records element when sessions array is empty:

<li ng-if="!day.length">
    No sessions on this day.
</li>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Cute! I like that. +1, Looks cleaner than using ng-hide / ng-show
It's not only cleaner, but also reduces number of watch functions making app a little faster.
So that's what the + css operator is for. Really nice trick, sir. Have a beer!
7

I think this would work for your case:

    <li ng-hide="day.length > 0">
        No sessions on this day.
    </li>

No extra CSS needed. Assumes day is an array.

http://plnkr.co/edit/WgDviOKjHKS1Vt5A5qrW

Improve this answer

Comments

5

I would recommend handling that in your controller. Keeping your logic in the controller and javasript makes debugging easier and more manageable. I can think of 2 approaches: using ng-show/ng-hide or a condition for your day variable when its empty.

Option 1

ng-show/ng-hide approach:

$scope.isDayEmpty = function(){
    return $scope.day.length > 0 ? false : true;
}

html:

<ul class="day">
    <li ng-repeat="sessions in day" ng-hide="isDayEmpty">
        ...
    </li>
    <li ng-show="isDayEmpty">
        No Sessions this Day
    </li>
</ul>

Option 2:

ng-repeat approach

if($scope.day.length == 0){
    $scope.day.push("No Sessions this Day");
}

This should get you essentially the same result. The first approach would make your CSS styling easier assuming you want to do something different in that case.

The second approach can vary in style depending on your code but thats an example of how you can do it. I don't know your javascript so I can't be more specific to your scenario.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.