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方法。有了这个标记（剥离了额外的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，因此我无法更好地了解您的情况。

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

3 个答案:

演示：http://plnkr.co/edit/KqM9hfgTTiPlkdmEevDv?p=preview