Aurelia repeat.for limit

Aurelia repeat.for limit

本文关键字:limit for repeat Aurelia      更新时间:2023-09-26

我正在用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在视图中剪切do it的控制器中的列表吗?

谢谢!

选项1:使用值转换器

取值转换器.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>

此场景和许多其他场景的实时示例请点击此处

aurelia.io 上关于价值转换器的其他文档

选项2:在数字上重复

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

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

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

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

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

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