Access both indices in a nested loop in aurelia.io

Question

I just started learning JavaScript with Aurelia.io and I am currently trying to access the index of a 2D-Array that is rendered by Aurelia in order to bind the id attribute to the outer and inner index of the loop. The 2D-Array is rendered into a table with two loops:

<table>
  <tr repeat.for="field of fields">
    <td repeat.for="f of field">
      <div class ="boardcell" id.one-time="$index" click.delegate="klick($index)">${f}</div>
    </td>
  </tr>
</table>

I am currently only able to access the index of the inner loop. Is there a way I can access the index of the outer loop, too?

Thanks!

Answer 1

As stated in the comment, you have to use the $parent to access the parent's scope.

Consider this example:

<template>
  <div repeat.for="y of 5">
    <div repeat.for="x of 5">
      ${$index} * ${$parent.$index} = ${$index * $parent.$index}
    </div>
  </div>
</template>

Answer 2

Use $parent.$index for parent repeat.for index

Example Plunker