angularjs – ng-repeat – 显示数组为空或为空的内容

发布时间：2020-12-17 07:43:26 所属栏目：安全来源：网络整理

导读：我有一个深度嵌套的重复列表,只有在最后一个循环中,如果列表为空,我必须显示备用内容.我是新来的角度,看到一些在线的帖子请帮助我哪里可以使用内容,如果列表是空的. ng-repeat =当天的会话可能为空. ul class="day" li ng-repeat="sessions in day" ul class

我有一个深度嵌套的重复列表,只有在最后一个循环中,如果列表为空,我必须显示备用内容.我是新来的角度,看到一些在线的帖子请帮助我哪里可以使用内容,如果列表是空的. ng-repeat =当天的会话可能为空.

<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方法在这种情况下,我通常使用纯CSS方法.使用此标记(stripped 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;
}

所以当会话数组为空时,将不会显示任何代码,只有没有会话可见.如果在这一天至少有一个会话就会隐藏.

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

2). ngIf方法.当会话数组为空时,您可以使用ngIf / ngShow指令来显示无记录元素：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!