Aurelia repeat.for 限制

Question

我正在使用 Aurelia 开发一个应用程序，假设我在那里有一个循环：

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

有很多条目，所以我自然想限制显示的条目数。所以基本上我想要类似 Angular 的重复限制：

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

我已经查看了这里的文档 http://aurelia.io/docs.html，但没有找到任何关于该主题的内容。

Aurelia 有这样的功能吗？如果不是，我宁愿在视图中使用 $index 来剪切控制器中的列表吗？

谢谢！

Answer 1

选项 1：使用值转换器。

取值-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>

此场景和许多其他场景的实例 here.

aurelia.io

上有关值转换器的其他文档

选项 2：重复一个数字

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

Answer 2

如果您想以不同的值开始，您可以编辑 TakeValueConverter 在 toView 方法中添加第三个参数。

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

但是你必须自己以某种方式跟踪最后的位置

Answer 3

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

使用索引和 if 来阻止超出索引标准的其余记录