在AngularJs中ng重复迭代仅X次


86

如何使用NG-重复类似Javascript中?

例:

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

我想用ng-repeat重复4次,但是我该怎么做呢?


3
两者都可能:指令具有驼峰式的名称,例如ngBind。可以通过使用以下特殊字符:,-或_将驼峰大小写名称转换为蛇形大小写来调用该指令。可选地,该指令可以以x或data为前缀,以使其与HTML验证程序兼容。
Asgoth

2
哇,为什么会有这么多错误的答案,您应该在items | limitTo:4“中使用ng-repeat =” item“
Toolkit

他有可能没有任何迭代的机会。说,以星级评分显示星星。可能有一个字段需要显示多少颗星,但这不是可重复的。
nirazul

@Toolkit ...什么是items..?
TJ

Answers:


342

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

<div ng-repeat="item in items|limitTo:4">{{item}}</div>

14
这应该是答案,因为它还可以遍历数组中的对象。加上其Angular功能。
Ashley Coolman

29
这是一段非常有用的代码,但是实际上并不能满足OP的问题。他只是在寻找一种重复n次的方法,而且可能没有实际的对象可以重复。
SamHuckaby 2014年

2
这应该是答案,它使用AngularJS核心提供的工具
Udo

10
这实际上并不能解决问题。您假设他有一个名为items
Batman

1
确实不是这个问题的有用答案(我专门用谷歌搜索了如何迭代X次,而不是限制X),但是仍然有用。
MacK'Mar

65

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

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

这是一个Plunker示例。


2
灵巧且非常有用,无需在控制器中使用任何功能。仍然困惑为什么这不是一个有角度的功能
MacK

1
这应该是答案。OP要求“使用ng-repeat喜欢”。这意味着直接在视图中拥有所有实现,而无需控制器的任何“协助”。该解决方案确实可以做到这一点...而且启动起来非常聪明。
karfus

不错,但不适用于所有角度版本。我正在使用1.2.9,但不支持它:Error: [$parse:isecfld]
Emaborsa

50

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

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

短n甜


2
为什么错了?有用。如果您希望从数组索引中将数组元素从2扩展到4,那么我们来看另一种情况。它可以与limitTo过滤器一起使用吗?
Gihan 2015年

4
没错,它并不容易实现item in items|limitTo:4
CENT1PEDE

1
这增加了我可以显示项目1-4的功能,然后单击一个按钮将.slice(0,4)更改为.slice(5,8),从而实现了简单的分页器。谢谢!
BaneStar007 '18

39

在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>

19
其他选项:t in [1,2,3,4]t in 'aaaa' 等等:)
Valentyn Shybanov 2013年

4
似乎奇怪的是,Angular在不需要函数支持的情况下无法支持数学循环。
Guido Anselmi 2014年

4
是的,我可以想象必须迭代30倍,像这样编写它[1,2,3,4]。这是一个多么糟糕的解决方案
Matej 2014年

2
请参阅以下DavidLin的答案,以获得更好的解决方案。
SamHuckaby 2014年

@SamHuckaby问题正在范围内迭代。在这种情况下limitTo是没有用的。这并不是要迭代一组意味着自己的值,例如要迭代4次。而不是对现有数组的一部分进行4次迭代,而仅进行4次迭代。就像在创建一个临时切片(如[[0..4])时在coffeescript中一样,您实际上并不关心实际值,只需要重复操作4次即可。
2014年

13

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

不允许在转发器中重复。使用“跟踪依据”表达式指定唯一键。中继器:{0},重复密钥:{1}

为了避免这种情况

ng-repeat =“ t in getTimes(4)”

使用

通过$ index跟踪

像这样

在getTimes(4)中<div ng-repeat =“ t由$ index”> TEXT跟踪</ div>


我的技术适用于我使用的angularjs版本。只需检查plunkr,我将尽快更新它。
2014年

10

要重复7次,请尝试使用length = 7的数组,然后通过$ index对其进行跟踪

<span ng-repeat="a in (((b=[]).length=7)&&b) track by $index" ng-bind="$index + 1 + ', '"></span>

b=[]创建一个空的数组«b»,
.length=7将其大小设置为«7»,
&&b让新的数组«b»可用于ng-repeat,
track by $index其中«$ index»是迭代的位置。
ng-bind="$index + 1"从1开始显示

要重复X次:
只需将7替换为X即可


不清楚该答案提供了哪些内容,但尚未被接受的答案或获得较高投票的两个答案所覆盖。
JamesT

没什么比Angular强大得多。
funnyniko

3
票数最高的两个答案似乎假设“项目”是一个数组。这使阵列就位。
funnyniko

做得好,它有效。这是实际解决OP的问题的唯一解决方案。令人惊讶的是,它只有几票。我只是想知道是否有更优雅的解决方案。
Healforgreen

3

这里的所有答案似乎都假设items是一个数组。但是,在AngularJS中,它也可能是一个对象。在这种情况下,使用limitTo和array.slice进行过滤都将无效。作为一种可能的解决方案,如果您不介意丢失对象键,则可以将对象转换为数组。这是一个过滤器的例子,可以做到这一点:

myFilter.filter('obj2arr', function() {
    return function(obj) {
        if (typeof obj === 'object') {
            var arr = [], i = 0, key;
            for( key in obj ) {
                arr[i] = obj[key];
                i++;
            }
            return arr;
        }
        else {
            return obj;
        }

    };
});

一旦是数组,请使用slice或limitTo,如其他答案所述。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.