使用AngularJs中的ng-repeat迭代仅限X次

Question

如何像Javascript中的for一样使用ng-repeat？

例子：

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

我想使用ng-repeat迭代4次，但是怎么做呢？

- Vural

---

两者都是可行的：指令具有骆驼命名法，如ngBind。该指令可以通过将骆驼命名法转换成蛇形命名法并添加特殊字符:，-或_来调用。也可以选择在指令前加上x-或data-以使其符合HTML验证器的规范。 - asgoth

哇，怎么会有这么多错误的答案，你应该使用ng-repeat="item in items|limitTo:4"。 - Toolkit

他可能没有任何数组可迭代。比如，要显示星级评分中的星星。可能有一个字段来指定需要显示多少颗星星，但这不是可迭代的。 - nirazul

@Toolkit...还有items是什么？ - T J

@TJ https://dev59.com/LGYq5IYBdhLWcg3wxjg7#17736076 - Toolkit

@Toolkit 这个回答是关于一个叫做 limitTo 的筛选器。我的问题是 items 是什么，因为 OP 的问题在于他没有一个 items 数组可以提供给 ng-repeat（或任何筛选器），只有一个整数。 - T J

Answer 1

Angular提供了一个limitTo:limit过滤器，它支持限制前x个项目和后x个项目：

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

- David Lin

---

这应该是正确答案，因为它也适用于迭代数组中的对象。此外，这是一个 Angular 的特性。 - Ashley Coolman

这段代码非常有用，但实际上并没有满足原帖提问者的问题。他只是想找到一种重复执行n次的方法，很可能并没有一个真正需要迭代的对象。 - SamHuckaby

这应该是答案，它使用AngularJS核心提供的工具。 - Udo

这并没有解决问题。你假设他有一个名为“items”的对象。 - Batman

虽然并不是针对问题的一个有用回答（我特意搜索了如何迭代X次，而不是限制X），但这仍然是一段有用的代码。 - MacK

Answer 2

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

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

这是一个Plunker示例。

- ChandrasekarG

---

聪明而非常有用，而不需要在控制器中使用任何函数。仍然困惑为什么这不是Angular的一个特性。 - MacK

这应该是答案。 OP要求“像for一样使用ng-repeat”。这意味着在视图中直接拥有所有实现，没有任何来自控制器的“辅助”。这个解决方案正是如此...而且非常聪明。 - karfus

很好，但并不适用于所有Angular版本。我正在使用1.2.9，但它不被支持：Error: [$parse:isecfld] - Emaborsa

Answer 3

你可以在JavaScript数组对象中使用slice方法。

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

简短而甜美

- Gihan

---

为什么是错误的？它可以工作。让我们考虑另一种情况，如果您想从数组索引中获取2到4个数组元素。使用limitTo过滤器可以吗？ - Gihan

这并不是错误，只是没有item in items|limitTo:4这么简单。 - jofftiquez

这个功能可以让我展示1-4项，然后点击一个按钮来改变.slice(0,4)为.slice(5,8)，从而实现简单的分页器。谢谢！ - BaneStar007

Answer 4

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

- mpm

---

其他选项：t在[1、2、3、4]或t在'aaaa'中。 - Valentyn Shybanov

似乎很奇怪，Angular不能支持数学循环而不需要一个函数来支持它。 - Guido Anselmi

是的，我可以想象需要迭代30次，像[1,2,3,4]这样写......多么令人沮丧的解决方案。 - Matej

请参考DavidLin的答案，那里有更好的解决方案。 - SamHuckaby

这个答案已经不再适用了！！！只需使用DavidLin的答案，它完美地工作。 - user3888372

Answer 5

@mpm提供的答案无效，它会给出以下错误：

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

为了避免这种情况，您需要在

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

之后添加

track by $index

像这样：

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

- Pratik Goenka

---

我的技术在我使用的AngularJS版本中有效。只需检查Plunkr，我会尽快更新它。 - mpm

Answer 6

为了重复7次，请尝试使用长度为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。

- funnyniko

---

不清楚这个答案提供了什么，而已被接受的答案或两个更高票数的答案已经涵盖了。 - JamesT

Angular有多强大，不言而喻。 - funnyniko

两个更高票的答案似乎假设“items”是一个数组。而这个解决方案则在原地创建了这个数组。 - funnyniko

做得好，它有效了。这是唯一一个真正解决了OP问题的方案。令人惊讶的是，它只有几个投票。我只是想知道是否有更优雅的解决方案。 - Healforgreen

Answer 7

所有回答都假定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。

- Per Quested Aronsson