2

我正在研究我正在渲染的大型表的性能改进，并且遇到了我想尝试的 angular-ui-scroll 。

在我的表中，我在我的 ng-repeat 上使用 key\value 访问器，例如：

<tr ng-repeat="(key, value) in vm.stopTimes track by key">
    <td class="timetable-detail-stop" layout="row" flex layout-align="start center">
        {{ vm.expandedTimetable.stops[key].name }}
    </td>
    <td ng-repeat="departure in value.times track by $index">
        {{departure.time}}
    </td>
</tr>

我可以将 ng-repeat 中支持的键\值语法与 ui-scroll 一起使用吗？我不太确定我是否可以通读文档。

有没有人使用键控对象\字典做到这一点？

谢谢

4

1 回答 1

0

如果我们谈论的是表行虚拟化，那么它可能看起来像

<div style="height: 500px; overflow: auto;" ui-scroll-viewport>
  <table>
    <tr ui-scroll="item in vm.datasource">
      <td class="timetable-detail-stop">
        {{ vm.expandedTimetable.stops[item.key].name }}
      </td>
      <td ng-repeat="departure in item.value.times track by $index">
        {{departure.time}}
      </td>
    </tr>
  </table>
</div>

其中datasource是一个对象，其get方法返回（通过success回调）基于index和count参数的项目数组：

this.datasource = {
  get: (index, count, success) => {
    let result = [];
      for (let i = index; i <= index + count - 1; i++) {
        const stopTimeKey = this.getStopTimeKeyByIndex(i);
        result.push({
          key: stopTimeKey,
          value: this.stopTimes[stopTimeKey]
        });
      }
    success(result);
  }
}

这里我假设我们可以stopTimes通过索引来获取key...方法的最简单实现getStopTimeKeyByIndex可能是

this.getStopTimeKeyByIndex = (index) => Object.keys(this.stopTimes)[index];
于 2018-08-23T21:37:02.420 回答