angular-ui-scroll с синтаксисом (ключ, значение) ng-repeat

Question

Я смотрю на улучшения производительности для большой таблицы, которую я рендеринг, и наткнулся на https://github.com/angular-ui/ui-scroll, которую я хотел бы попробовать.

В моей таблице я использую метод доступа ключ \ значение в моем ng-repeat, например:

<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? Я не уверен, что смогу прочитать документы.

Кто-нибудь делал это используя ключевые объекты \ словари?

Спасибо

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 метод, который возвращает (через 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 ключ по индексу... Простейшая реализация getStopTimeKeyByIndex метод может быть

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