在 AngularJs 中迭代 ng-repeat 仅 X 次

IT技术 javascript angularjs
2021-03-14 11:17:16

如何在 Javascript 中使用类似for 的ng-repeat

例子:

<div ng-repeat="4">Text</div>

我想用 ng-repeat 迭代 4 次,但我该怎么做?

6个回答

Angular 带有一个 limitTo:limit 过滤器,它支持限制前 x 项和最后 x 项:

<div ng-repeat="item in items|limitTo:4">{{item}}</div>
这应该是答案,因为它也适用于迭代数组中的对象。加上它的一个 Angular 特性。
2021-04-25 11:17:16
这应该是答案,它使用了 AngularJS 核心提供的工具
2021-05-10 11:17:16
这实际上并不能解决问题。你假设他有一个名为items
2021-05-11 11:17:16
对于这个问题确实不是一个有用的答案(我专门用谷歌搜索了如何迭代 X 次,而不是限制 X),但仍然是有用的一段代码。
2021-05-13 11:17:16
这是一段非常有用的代码,但这实际上并不能满足 OP 的问题。他只是在寻找一种重复 n 次的方法,并且可能没有要迭代的实际对象。
2021-05-15 11:17:16

这是我能想到的最简单的解决方法。

<span ng-repeat="n in [].constructor(5) track by $index">
{{$index}}
</span>

这是一个Plunker示例。

不错,但不适用于所有角度版本。我使用的是 1.2.9,但不受支持:Error: [$parse:isecfld]
2021-04-28 11:17:16
这应该就是答案OP 要求“使用 ng-repeat like for”。这意味着将所有实现直接放在视图中,而无需来自控制器的任何“帮助”。这个解决方案正是这样做的……而且启动起来非常聪明。
2021-05-05 11:17:16
无需使用控制器中的任何功能即可智能且非常有用。仍然困惑为什么这不是一个角度特征
2021-05-08 11:17:16

您可以在 javascript 数组对象中使用 slice 方法

<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>

短n甜

这添加了我可以显示项目 1-4 的功能,然后单击一个按钮将 .slice(0,4) 更改为 .slice(5,8),从而实现简单的分页器。谢谢!
2021-04-26 11:17:16
这没有错,只是没有那么简单 item in items|limitTo:4
2021-05-02 11:17:16
为什么是错的?。有用。让我们考虑另一种情况,如果您希望数组索引中的数组元素为 2 到 4。它是否适用于 limitTo 过滤器?
2021-05-04 11:17:16

在 html 中:

<div ng-repeat="t in getTimes(4)">text</div>

并在控制器中:

$scope.getTimes=function(n){
     return new Array(n);
};

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

编辑 :

使用 angularjs > 1.2.x

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>
其他选项:t in [1,2,3,4]t in 'aaaa' 等:)
2021-04-17 11:17:16
请参阅以下 DavidLin 的回答以获得更好的解决方案。
2021-04-19 11:17:16
Angular 不能在不需要函数支持的情况下支持数学循环,这似乎很奇怪。
2021-04-20 11:17:16
是的,我可以想象必须迭代 30 倍,像这样写[1,2,3,4]……这是一个多么令人沮丧的解决方案
2021-04-22 11:17:16
@SamHuckaby 问题是在一个范围内迭代。在这种情况下,limitTo 是无用的。这不是要迭代一组本身就有意义的值,它是迭代 4 次,例如。不是对现有数组的切片进行 4 次,只是 4 次。就像在 coffeescript 中创建临时切片时一样,例如 "[0..4]" ,您并不真正关心实际值,只是您将重复操作 4 次。
2021-05-16 11:17:16

@mpm 给出的答案不起作用它给出了错误

不允许在中继器中重复。使用“track by”表达式来指定唯一键。中继器:{0},重复键:{1}

为了避免这种情况

ng-repeat="t in getTimes(4)"

利用

按 $index 跟踪

像这样

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>

我的技术适用于我使用的 angularjs 版本。只需检查 plunkr,我会尽快更新它。
2021-04-21 11:17:16