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

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!

• javascript
• aurelia

3 Answers 3

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>

If you want to start at a different value you can edit the TakeValueConverter at the toView method add a third parameter.

toView(array,start,count){
  return array.slice(start,count);
}

But then you have to track the last position somehow yourself

<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