Javascript 在 AngularJs 中迭代 ng-repeat 仅 X 次
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14198017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iteration ng-repeat only X times in AngularJs
提问by Vural
How can I use ng-repeat like forin Javascript?
如何在 Javascript 中使用类似for 的ng-repeat ?
example:
例子:
<div ng-repeat="4">Text</div>
I want to iterate with ng-repeat 4 times but how can I do it?
我想用 ng-repeat 迭代 4 次,但我该怎么做?
回答by David Lin
Angular comes with a limitTo:limit filter, it support limiting first x items and last x items:
Angular 带有一个 limitTo:limit 过滤器,它支持限制前 x 项和最后 x 项:
<div ng-repeat="item in items|limitTo:4">{{item}}</div>
回答by ChandrasekarG
This is the simplest workaround I could think of.
这是我能想到的最简单的解决方法。
<span ng-repeat="n in [].constructor(5) track by $index">
{{$index}}
</span>
Here's a Plunker example.
这是一个Plunker示例。
回答by Gihan
You can use slice method in javascript array object
您可以在 javascript 数组对象中使用 slice 方法
<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>
Short n sweet
短n甜
回答by mpm
in the html :
在 html 中:
<div ng-repeat="t in getTimes(4)">text</div>
and in the controller :
并在控制器中:
$scope.getTimes=function(n){
return new Array(n);
};
http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj
http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj
EDIT :
编辑 :
with angularjs > 1.2.x
使用 angularjs > 1.2.x
<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>
回答by Pratik Goenka
Answer given by @mpm is not working it gives the error
@mpm 给出的答案不起作用它给出了错误
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: {0}, Duplicate key: {1}
不允许在中继器中重复。使用“track by”表达式来指定唯一键。中继器:{0},重复键:{1}
To avoid this along with
为了避免这种情况
ng-repeat="t in getTimes(4)"
ng-repeat="t in getTimes(4)"
use
用
track by $index
按 $index 跟踪
like this
像这样
<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>
<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>
回答by funnyniko
To repeat 7times, try to use a an array with length=7, then trackit by$index:
要重复7次,请尝试使用长度为 7的数组,然后通过$index跟踪它:
<span ng-repeat="a in (((b=[]).length=7)&&b) track by $index" ng-bind="$index + 1 + ', '"></span>
b=[]create an empty Array ?b?,.length=7set it's size to ?7?,&&blet the new Array ?b? be available to ng-repeat,track by $indexwhere ?$index?is the position of iteration.ng-bind="$index + 1"display starting at 1.
b=[]创建一个空数组?b?,.length=7将其大小设置为?7?,&&b让新数组?b? 可用于 ng-repeat,track by $index在哪里?$index?是迭代的位置。ng-bind="$index + 1"显示从 1 开始。
To repeat Xtimes:
just replace 7by X.
要重复X次:
只需将7替换为X。
回答by Per Quested Aronsson
All answers here seem to assume that itemsis an array. However, in AngularJS, it might as well be an object. In that case, neither filtering with limitTo nor array.slice will work. As one possible solution, you can convert your object to an array, if you don't mind losing the object keys. Here is an example of a filter to do just that:
这里的所有答案似乎都假设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;
}
};
});
Once it is an array, use slice or limitTo, as stated in other answers.
一旦它是一个数组,就使用 slice 或 limitTo,如其他答案中所述。

