在AngularJs中迭代ng-repeat只重复X次

时间:2013-01-07 14:35:42

标签: javascript angularjs

如何在Javascript中使用像这样的ng-repeat

示例:

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

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

6 个答案:

答案 0 :(得分:335)

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

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

答案 1 :(得分:49)

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

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

短暂的甜蜜

答案 2 :(得分:39)

在html中:

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

并在控制器中:

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

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

编辑:

with angularjs&gt; 1.2.x的

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

答案 3 :(得分:13)

@mpm给出的答案没有用,它给出了错误

  

不允许在转发器中重复。使用'track by'表达式   指定唯一键。转发器:{0},重复键:{1}

一起避免这种情况
  

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

使用

  

跟踪$ index

像这样

  

&lt; div ng-repeat =“t在getTimes(4)中跟踪   $指数“&gt;文字&LT; / DIV&GT;

答案 4 :(得分: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 次:
只需用 X 替换 7

答案 5 :(得分: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,如其他答案中所述。