我目前正在尝试创建时间表查看器,并利用Angular Material(JS)给我们的md-virtual-repeat
指令
我发现我不能在虚拟重复中使用表,所以我暂时只使用了div。我们当前遇到的一个问题是尝试渲染a)在同一页面上的两个虚拟重复b)试图找出一种在虚拟重复本身内创建两个单独元素(侧边栏,滚动体)的方法,因为我们希望侧边栏坚持并允许表格的其余部分滚动。这应该很容易实现,固定侧边栏并计算表主体的适当边距,但虚拟重复似乎不喜欢这种方式。下面是标记:
<div class="timetable-container-outer">
<div id="timetableContainer" class="timetable-container">
<md-virtual-repeat-container id="vertical-container">
<div md-virtual-repeat="item in vm.virtualItems" md-on-demand class="repeated-item" flex="">
<div class="timetable-detail-stop" layout="row" flex layout-align="start center">
<img src="assets/images/markers/stage-1-or-selected.png" />
<div>{{ item.stopName }}</div>
</div>
<div class="timetable-detail-time" ng-repeat="departure in item.stopTimes track by $index" ng-class="{'block': departure.groupText !== undefined}">
{{ departure.groupText !== undefined ? departure.groupText : departure.time }}
</div>
</div>
</md-virtual-repeat-container>
</div>
</div>
我正在考虑做的一件事是对timetable-detail-stop
元素应用位置定位,但是这样做会导致页面空白,但是在所有元素都呈现完美之后才能进行。我不想添加ng样式,因为这将在页面上创建更多绑定,从而使虚拟重复工作无用。在尝试渲染虚拟重复中的其他元素之前,是否有人遇到过问题?如果是,您如何做到这一点?