CODEWITHSUNDEEP
javascriptaurelia
Alexander Mikhalchenko
Alexander Mikhalchenko

Reputation: 4565

Aurelia repeat.for limit

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!

Upvotes: 11

Views: 2632

Answers (3)

Teezy7
Teezy7

Reputation: 535

<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

Upvotes: 1

Ilja
Ilja

Reputation: 63

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

Upvotes: 1

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

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>

Upvotes: 21

Related Questions