在 AngularJs 中迭代 ng-repeat 仅 X 次

Posted 2023-03-05

【中文标题】在 AngularJs 中迭代 ng-repeat 仅 X 次

【英文标题】：Iteration ng-repeat only X times in AngularJs

【发布时间】：2012-12-21 07:18:15

【问题描述】：

如何在 javascript 中使用像 for 这样的 ng-repeat？

示例：

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

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

【问题讨论】：

两者都是可能的：指令具有驼峰式名称，例如 ngBind。可以通过使用这些特殊字符 :、- 或 _ 将驼峰式名称转换为蛇形大小写来调用该指令。可选地，该指令可以以 x- 或 data- 为前缀，以使其符合 html 验证器。

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

他有可能没有任何数组可以迭代。比如说，在星级中显示星星。可能有一个字段表示您需要显示多少颗星，但这是不可迭代的。

@Toolkit ... 什么是items..？

@TJ ***.com/a/17736076/631527

【参考方案1】：

在 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' 等 :)

Angular 不能支持数学循环而不需要函数来支持它，这似乎很奇怪。

是的，我可以想象不得不迭代 30 倍，写成 [1,2,3,4].. 这是一个多么糟糕的解决方案

请参阅下面 DavidLin 的回答以获得更好的解决方案。

@SamHuckaby 问题是在一个范围内迭代。在这种情况下，limitTo 是没用的。这不是迭代一组本身就有意义的值，例如迭代 4 次。不是对现有数组的切片进行 4 次，只是 4 次。就像在咖啡脚本中创建临时切片时一样，例如“[0..4]”，您并不真正关心实际值，只需重复操作 4 次。

【参考方案2】：

你可以在javascript数组对象中使用切片方法

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

短而甜

【讨论】：

为什么会出错？有用。让我们看另一种情况，如果您希望数组索引中的数组元素从 2 到 4。它是否适用于 limitTo 过滤器？

没有错，只是没有item in items|limitTo:4那么简单

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

【参考方案3】：

Angular 自带一个limitTo:limit 过滤器，它支持限制前x 项和后x 项：

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

【讨论】：

这应该是答案，因为它也适用于迭代数组中的对象。加上它的 Angular 功能。

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

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

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

的对象

对于这个问题确实不是一个有用的答案（我专门用谷歌搜索了如何迭代 X 次，而不是限制 X），但仍然有用的一段代码。

【参考方案4】：

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

不允许在转发器中重复。使用“track by”表达式 指定唯一键。中继器：0，重复键：1

为了避免这种情况与

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

使用

按 $index 跟踪

喜欢这个

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

【讨论】：

我的技术适用于我使用的 angularjs 版本。只需检查 plunkr，我会尽快更新它。

【参考方案5】：

这里的所有答案似乎都假设 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，如其他答案中所述。

【参考方案6】：

要重复 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。

【讨论】：

不清楚该答案提供的内容尚未包含在已接受的答案或两个更高票数的答案中。

无非就是 Angular 的强大功能。

两个较高票数的答案似乎假设 «items» 是一个数组。这个使阵列到位。

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

【参考方案7】：

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

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

这是Plunker example.

【讨论】：

智能且非常有用，无需使用控制器中的任何功能。仍然困惑为什么这不是角度特征

这应该是答案。 OP 要求“使用 ng-repeat like for”。这意味着将所有实现直接放在视图中，而无需控制器的任何“帮助”。这个解决方案就是这样做的……而且启动起来非常聪明。

不错，但不适用于所有角度版本。我使用的是 1.2.9，但不受支持：Error: [$parse:isecfld]