NativeScript index in the list of Repeater items - nativescript

Question

I am trying to get and use index of the list in NativeScript, in this case using Repeater.
Here is my code:
<ScrollView>
<Repeater items="{{ sviArtikli }}" itemTemplateSelector="$index">
<Repeater.itemsLayout>
<WrapLayout orientation="horizontal"/>
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Card:CardView margin="10" width="45%" height="250" item="{{ id }}" myIndex="{{ $index }}" tap="detaljiArtikla">
<grid-layout rows="250, *" columns="*, 50">
<Image loaded="slikaUcitana" class="lista-katalozi-slika" id="slicice" opacity="1" stretch="aspectFill" colSpan="3" row="0" src="{{ 'https://url_location/' + slika_image }}" />
</grid-layout>
</Card:CardView>
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
The part with myIndex="{{ $index }}" does not work as index can not be calculated in Repeater.
Is there a way I can get index for every item in repeater? - ListView works, but I can not use listview in this case.

Answer 1

I have created a plyground for you here. You can pass the unique ID in your dataprovider and can access in item.
P.S. There is an open Feature-request to support index in repeater, you can also cast your vote there.

Answer 2

Accessing item index is not yet supported in Repeater, but if it's crucial for you, you could extend the Repeater class to support index.
indexed-repeater.ts (tested against tns-core-modules v6.0.1)
import { Repeater } from "tns-core-modules/ui/repeater";
import { CSSType } from "tns-core-modules/ui/layouts/layout-base";
import { parse } from "tns-core-modules/ui/builder";
export module knownTemplates {
export const itemTemplate = "itemTemplate";
}
#CSSType("Repeater")
export class IndexedRepeater extends Repeater {
public refresh() {
if (this.itemsLayout) {
this.itemsLayout.removeChildren();
}
if (!this.items) {
return;
}
const length = this.items.length;
for (let i = 0; i < length; i++) {
const viewToAdd = this.itemTemplate ? parse(this.itemTemplate, this) : (<any>this)._getDefaultItemContent(i);
const dataItem = (<any>this)._getDataItem(i);
viewToAdd.bindingContext = {
item: dataItem,
index: i
};
this.itemsLayout.addChild(viewToAdd);
}
(<any>this)._isDirty = false;
}
}
Sample Usage
<ScrollView xmlns:comps="components/indexed-repeater">
<comps:IndexedRepeater items="{{ items }}">
<comps:IndexedRepeater.itemTemplate>
<Label text="{{ index + ' ' + item.name }}" class="m-10 h3" />
</comps:IndexedRepeater.itemTemplate>
</comps:IndexedRepeater>
</ScrollView>
Playground Sample

Answer 3

Hi guys thanks and it helped. What I did, without changing any code base is pushing locally generated ID's into JSON element and used them for indexes.
Now json has { "my_index": "0" ..... } which I change in for loop when fetch is over. I am using those indexes just to scroll the view on certain element in the list.
http.getJSON("https://....")
.then(function (response){
for(var i = 0; i < response.length; i++) {
response[i].my_index = i; // change response on the fly.
// do something with response....
}
}, function(error) {
console.error(JSON.stringify(error));
})
I guess this could help to someone as well.