角材料虚拟重复

时间:2018-08-23 12:50:05

标签: javascript angular material

我目前正在尝试创建时间表查看器,并利用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样式,因为这将在页面上创建更多绑定,从而使虚拟重复工作无用。在尝试渲染虚拟重复中的其他元素之前,是否有人遇到过问题?如果是,您如何做到这一点?

0 个答案:

没有答案