angular-ui-scroll with (key，value) ng-repeat语法

Question

我正在研究我正在呈现的一个大型表的性能改进，并遇到了我想尝试的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>

我可以在ui-scroll中使用ng-repeat中支持的key\value语法吗？我不确定我能不能看完这些文档。

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

谢谢

Answer 1

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

<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方法的对象，该方法根据index和count参数返回(通过success回调)项的数组：

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键...getStopTimeKeyByIndex方法最简单的实现可能是

this.getStopTimeKeyByIndex = (index) => Object.keys(this.stopTimes)[index];