ng-repeat - 显示数组是否为空或null的内容

Question

我有一个深层嵌套的ng-repeat列表,只有在最后一个循环中我才能显示备用内容,如果列表为空.我是棱角分明的新手,在网上看到一些帖子请帮帮我,如果列表为空,我可以在哪里使用内容.该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>

Answer 1

1).CSS方法.在这种情况下,我通常使用纯CSS方法.使用此标记(剥离extra-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当sessions数组为空时,您可以使用show no-records元素的指令:

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

Answer 2

我认为这适用于您的情况:

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

不需要额外的CSS.假设day是一个数组.

http://plnkr.co/edit/WgDviOKjHKS1Vt5A5qrW

Answer 3

我建议您在控制器中进行处理。将逻辑保留在控制器和javasript中可以使调试更加容易且更易于管理。我可以想到两种方法：在变量为空时使用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，因此我无法更具体地介绍您的情况。