我有一个深度嵌套的重复列表,只有在最后一个循环中,如果列表为空,我必须显示备用内容.我是新来的角度,看到一些在线的帖子请帮助我哪里可以使用内容,如果列表是空的. 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>
原文地址:https://www.jb51.cc/angularjs/142910.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。