Ng-repeat - содержимое, чтобы показать, является ли массив пустым или null

У меня есть глубокие вложенные списки ng-repeat, и только в последнем цикле я должен отображать альтернативный контент, если список пуст. Я новичок в angular, видел некоторые сообщения в Интернете, пожалуйста, помогите мне, где я могу использовать контент, если список пуст. ng-repeat=sessions in day может быть пустым.

<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

1). CSS. Я обычно использую чистый CSS-подход в таких случаях. С помощью этой разметки (лишенный лишнего html):

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

и правила CSS, чтобы скрыть .no-sessions li по умолчанию и сделать его видимым только в том случае, если нет тегов li:

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

Поэтому, когда массив sessions пуст, не будет отображаться li, и будет отображаться только no-sessions. И если скроется, как только в этот день будет хотя бы одна сессия.

Демо: http://plnkr.co/edit/KqM9hfgTTiPlkdmEevDv?p=preview

2). ngIf подход. Конечно, вы можете использовать директивы ngIf/ngShow для элемента show no-records, когда массив sessions пуст:

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

Ответ 2

Я думаю, что это сработает для вашего дела:

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

Дополнительные CSS не нужны. Предполагается, что day - это массив.

http://plnkr.co/edit/WgDviOKjHKS1Vt5A5qrW

Ответ 3

Я бы рекомендовал обработать это в вашем контроллере. Сохранение вашей логики в контроллере и javasript делает отладку более простой и управляемой. Я могу думать о 2 подходах: используя ng-show/ng-hide или условие для вашей переменной day, когда ее пустое.

Вариант 1

ng-show/ng-hide:

$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>

Вариант 2:

ng-repeat подход

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

Это должно дать вам по существу тот же результат. Первый подход упростит ваш стиль CSS, если вы захотите сделать что-то другое в этом случае.

Второй подход может отличаться по стилю в зависимости от вашего кода, но это пример того, как вы можете это сделать. Я не знаю вашего javascript, поэтому я не могу быть более конкретным для вашего сценария.