ng-repeat 定义的次数而不是重复数组的方法?

IT技术 javascript html angularjs angularjs-ng-repeat
2021-01-10 19:26:13

有没有办法达到ng-repeat定义的次数,而不必总是遍历数组?

例如,下面我希望列表项显示 5 次,假设$scope.number等于 5 并增加数字,以便每个列表项增加 1、2、3、4、5

想要的结果:

<ul>
   <li><span>1</span></li>
   <li><span>2</span></li>
   <li><span>3</span></li>
   <li><span>4</span></li>
   <li><span>5</span></li>
</ul>
6个回答

更新 (9/25/2018)

较新版本的 AngularJS (>= 1.3.0) 允许你只用一个变量(不需要函数)来做到这一点:

<li ng-repeat="x in [].constructor(number) track by $index">
    <span>{{ $index+1 }}</span>
</li>
$scope.number = 5;

这在首次提出问题时是不可能的。归功于@Nikhil Nambiar 对此更新的回答


原版 (5/29/2013)

目前,ng-repeat只接受一个集合作为参数,但你可以这样做:

<li ng-repeat="i in getNumber(number)">
    <span>{{ $index+1 }}</span>
</li>

在你的控制器中的某个地方:

$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);   
}

这将允许您随意更改$scope.number为任何数字,并且仍然保持您正在寻找的绑定。

编辑(2014 年 1 月 6 日) ——较新版本的 AngularJS(>= 1.1.5)需要track by $index

<li ng-repeat="i in getNumber(number) track by $index">
    <span>{{ $index+1 }}</span>
</li>

这是使用相同getNumber功能的几个列表的小提琴

@Manavendher 不正确。我们不需要填充数组,我们只需要它是 的长度$scope.numberAngular 的摘要循环将自动调用此函数并在任何$scope.number更改时调整数组的大小
2021-03-13 19:26:13
@Manavendher 我尝试了 angular 1.2.x 和 1.5.x,结果相同。链接是1. stackoverflow.com/questions/40202263/... 2. plnkr.co/edit/zcPr7oUEBBWvCSVkDvml
2021-03-22 19:26:13
$scope.getNumber = function(num) { var x=new Array(); for(var i=0;i<num;i++){ x.push(i+1); } 返回 x; } //当数字动态变化时使用这个函数
2021-03-28 19:26:13
@sh0ber。当我需要根据数字下拉列表中选择的值更改列表项时。我先尝试了您的功能,当它不起作用时,我将其更改为上面以更新编号。在下拉列表中选择不同数量时的列表项。您能否使用您的功能检查我的场景。
2021-03-31 19:26:13

你可以这样做:

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>
如果您在分页控件中使用它,而您只需要 <li><a href="javascript:;" ng-click="SelectPage($index)">{{ i }}</a></li>
2021-03-25 19:26:13
考虑调用动态长度数组的数组构造函数,如本答案所述
2021-03-26 19:26:13
@AdityaMP,将此用于 javascript stackoverflow.com/a/31989462/3160597 中的范围
2021-03-28 19:26:13
如果我必须重复 120 次呢?我应该用 [1,2,3 ... 120] 吗?
2021-03-28 19:26:13
在 Chrome v. 39.0.2171.95(64 位)、FF v. 33.1.1 和 Safari v. 8.0.2 上测试
2021-03-29 19:26:13

这是一个如何执行此操作的示例。请注意,我的灵感来自 ng-repeat 文档中的评论:http : //jsfiddle.net/digitalzebra/wnWY6/

注意 ng-repeat 指令:

<div ng-app>
    <div ng-controller="TestCtrl">
        <div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
    </div>
</div>

这是控制器:

function TestCtrl($scope) {
    $scope.range = function(n) {
        return new Array(n);
    };
};
您还可以使用_.rangefrom Underscore 或 lodash 创建数组: $scope.range = _.range(0, n);
2021-03-11 19:26:13

我认为来自这个线程的这个jsFiddle可能是你正在寻找的。

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | limitTo:2">
       {{item.name}}
   </div>
</div>
这个答案将使您的控制器占用最少的空间,我相信这也是首选的 Angular 方法。IMO 接受的答案应替换为这个。
2021-03-13 19:26:13
进一步阅读谷歌线程链接,它描述了如何使用“切片”。例如 group1: items.slice(0,3), group2: items.slice(3,6) 等。
2021-03-24 19:26:13
@Cody 不幸的是,不,它没有回答这个问题。OP 声明“而不是总是必须迭代数组”和“假设$scope.number等于 5”。目的是使用整数变量来定义项目计数,而不是对其进行硬编码,也不使用预定义的数组。
2021-03-27 19:26:13
这应该是公认的答案(在我看来)——最优雅,最受 ng-preferred。
2021-03-29 19:26:13
@Cody @sh0ber 您可以在您的范围 ( $scope.limit = 2) 中设置限制并像使用它一样使用它...|limitTo:limit- 请参阅更新的小提琴
2021-04-08 19:26:13

更简单的方法是(例如 5 次):

<div ng-repeat="x in [].constructor(5) track by $index">
       ...
</div>
赞成,当第一次提出问题时这是不可能的(Angular 1.2)。我修改了接受的答案以包含此内容。不错的工作!
2021-03-15 19:26:13
我喜欢这种方式。
2021-03-26 19:26:13
杰出的。控制器中的可读、简短且没有愚蠢的函数来返回一个新数组。
2021-04-03 19:26:13
我只是希望我理解为什么这个语法有效但无效Array(5)(或者确实[...Array(5).keys()]得到一个数组 [0,1,2,3,4])
2021-04-04 19:26:13