是否有一种方法可以ng-repeat定义的次数,而不是总是要迭代一个数组?

例如,下面我希望列表项显示5次,假设为$scope。数字等于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>

当前回答

这只是对公认答案的轻微变化,但实际上不需要创建新函数。仅在作用域中导入Array:

<div ng-app="myapp">
    <div ng-controller="ctrlParent">
        <ul>
            <li ng-repeat="i in counter(5) track by $index">
              <span>{{$index+1}}</span></li>
        </ul>
    </div>
</div>
var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
    $scope.myNumber = 5;
    $scope.counter = Array;
});

这把小提琴就是一个活生生的例子。

其他回答

更新(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。任意编号,仍然保持您正在寻找的绑定。

编辑(1/6/2014)——AngularJS(>= 1.1.5)的新版本要求通过$index跟踪:

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

这里使用相同的getNumber函数对两个列表进行了修改。

我需要一个更动态的解决方案-我可以增加重复。

超文本标记语言

<div ng-repeat="n in newUserCount">
<input type="text" value="" name="newuser{{n}}"/>
</div>

复印机控制

<span class="helper" ng-click="duplicateUser()">
Create another user with the same permissions
</span>

JS

 $scope.newUserCount = Array('1');
var primaryValue = 1;
$scope.duplicateUser = function()
{
    primaryValue++;
    $scope.newUserCount.push(primaryValue)
}

Angular提供了过滤器来修改集合。在这种情况下,集合将为空,即[],过滤器也接受参数,如下所示:

<div id="demo">
    <ul>
        <li ng-repeat="not in []|fixedNumber:number track by $index">{{$index}}</li>
    </ul>
</div>

JS:

module.filter('fixedNumber', function() {
    return function(emptyarray, number) {
        return Array(number);
    }
});

module.controller('myCtrl', ['$scope', function($scope) {
    $scope.number = 5;
}]);

这个方法与上面提出的方法非常相似,不一定更优秀,但显示了AngularJS中过滤器的强大功能。

我也遇到了同样的问题。我偶然发现了这条线索,但不喜欢他们在这里的方法。我的解决方案是使用我们已经安装好的underscore.js。其实很简单:

<ul>
    <li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>

这正是你想要的。

我想保持我的html非常小,所以定义了一个小过滤器,创建数组[0,1,2,…就像其他人所做的那样:

angular.module('awesomeApp')
  .filter('range', function(){
    return function(n) {
      var res = [];
      for (var i = 0; i < n; i++) {
        res.push(i);
      }
      return res;
    };
  });

之后,在视图上可以这样使用:

<ul>
  <li ng-repeat="i in 5 | range">
    {{i+1}} <!-- the array will range from 0 to 4 -->
  </li>
</ul>