Referencing List by indexVar in lightning component

Question

I have nested list in my lightning component and now I want to refer records of list using indexVar. Has anyone done this before?

<aura:iteration items="{!v.records}" var="row" indexVar="rowCnt">

Like `{!row[rowCnt]}?`

</aura:iteration>

Answer 1

<aura:iteration items="{!v.records}" var="row" indexVar="rowCnt">
    {!row}
</aura:iteration>

will do the trick. Getting the value dynamically would look like this, {!v.records[rowCnt]} but it doesn't work in lightning.

Failed to save undefined: expecting a positive integer, found 'rowCnt'

You only are allowed to use static integers like: {!v.records[0]}

In case you need the index in your controller, you could use a regular html element like a div and pass the Index with a data-* attribute, unfortunately this won't work with any lightning component, only pure html.

<div onclick="{!c.doStuff}" data-index="{!rowCnt}">

doStuff : function(cmp, evt, helper) {
    var index = evt.currentTarget.dataset.index;
}