angular-ui-scroll with (key, value) ng-repeat syntax

Question

I am looking into performance improvements for a large table I am rendering and have come across angular-ui-scroll which I would like to try out.

In my table I am using the key\value accessor on my ng-repeat, e.g:

<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>

Can I use the supported key\value syntax from ng-repeat with ui-scroll? I'm not so sure I can having read through the docs.

Has anyone done this using keyed objects\dictionaries?

Thanks

what does `vm.stopTimes` look like? Usually `(key, value)` is used with 2 `ng-repeat`, where one is outside (if it's an array of objects) or inside (if it's an object with arrays, which will be your `value`) — Aleksey Solovey, Aug 13 '18 at 15:33
@AlekseySolovey - see my updated question with my 2 ng-repeats — mindparse, Aug 14 '18 at 08:49

score 0 · Answer 1 · answered Aug 23 '18 at 21:37

If we are talking about table rows virtualizing, then it may look like

<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>

Where the datasource is an object with get method which returns (via success callback) an array of items based on index and count params:

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);
  }
}

Here I assume that we can get stopTimes key by index... The simplest implementation of getStopTimeKeyByIndex method may be

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

angular-ui-scroll with (key, value) ng-repeat syntax

1 Answers1