是否有一种方法可以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>

当前回答

我也遇到过同样的问题,这就是我得出的结论:

(function () {
  angular
    .module('app')
    .directive('repeatTimes', repeatTimes);

  function repeatTimes ($window, $compile) {
    return { link: link };

    function link (scope, element, attrs) {
      var times    = scope.$eval(attrs.repeatTimes),
          template = element.clone().removeAttr('repeat-times');

      $window._(times).times(function (i) {
        var _scope = angular.extend(scope.$new(), { '$index': i });
        var html = $compile(template.clone())(_scope);

        html.insertBefore(element);
      });

      element.remove();
    }
  }
})();

... 和html:

<div repeat-times="4">{{ $index }}</div>

生活的例子

我使用了下划线的时间函数,因为我们已经在项目中使用它,但你可以很容易地用本地代码替换它。

其他回答

更新(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函数对两个列表进行了修改。

在Ivan的第一个答案上展开一点,只要字符是唯一的,你可以使用一个字符串作为集合,而不使用track by语句,所以如果用例少于10个数字(就像在问题中那样),我将简单地这样做:

<ul>
   <li ng-repeat="n in '12345'"><span>{{n}}</span></li>
</ul>

当然,这有点古怪,但看起来足够简单,也不是特别令人困惑。

由于遍历字符串,它将为每个字符呈现一个项:

<li ng-repeat = "k in 'aaaa' track by $index">
   {{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below.
</li>

我们可以使用数字|小数点后n位本机过滤器来使用这个丑陋但没有代码的解决方案。

 <li ng-repeat="k in (0|number:mynumber -2 ) track by $index">
    {{$index}}
 </li>

这样我们就有了mynumber元素,而不需要额外的代码。说‘0.000’。 我们用mynumber - 2来补偿0。 对于低于3的数字,它将不起作用,但在某些情况下可能有用。

我正在创建一个可重用的指令,其中最大数字将来自另一个ng-repeat。这是对最佳投票答案的编辑。

只需将控制器上的代码更改为这个-

$scope.getNumber = function(num) {
    var temp = [];
    for(var j = 0; j < num; j++){
        temp.push(j)
    }
    return temp; 
}

这将返回一个具有指定迭代次数的新数组

这真的很丑,但它可以在没有控制器的情况下为整数或变量工作:

整数:

<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>

变量:

<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>