Aurelia repeat.for limit

Question

I'm developing an app with Aurelia and let's say I have a loop there:

<div repeat.for="t of allTags">${t.name}</div>

There are many entries so naturally I would like to limit number of them shown. So basically I would like to have something like Angular's repeat limit:

<div ng-repeat="t in allTags | limitTo:5 ">{{t.name}}</div>

I have checked the docs here http://aurelia.io/docs.html but haven't found anything on the topic.

Is there a feature like that in Aurelia? If no, would I rather cut the list in controller of do it in the view with $index?

Thanks!

Answer 1

Option 1: Use a value converter.

take-value-converter.js

export class TakeValueConverter {
  toView(array, count) {
    return array.slice(0, count);
  }
}

app.html

<require from="./take-value-converter"></require>

<div repeat.for="t of allTags | take:5">${t.name}</div>

Live example of this scenario and many others here.

Other docs on value converters at aurelia.io

Option 2: repeat over a number

<div repeat.for="i of 5">${allTags[i].name}</div>

Answer 2

<div if.bind="$index<5" repeat.for="t of allTags">${t.name}</div>

Using the Index and if to block rest of the records that are over criteria of index