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

当前回答

如果n不是太高,另一种选择是使用split(")对n个字符的字符串:

<div ng-controller="MainCtrl">
<div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
</div>

其他回答

这只是对公认答案的轻微变化,但实际上不需要创建新函数。仅在作用域中导入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;
});

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

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

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

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

有很多方法可以做到这一点。我真的很困扰在我的控制器中有逻辑,所以我创建了一个简单的指令来解决重复一个元素n次的问题。

安装:

该指令可以使用安装器install angular-repeat-n安装

例子:

<span ng-repeat-n="4">{{$index}}</span

生产:1234

它也可以使用范围变量:

<span ng-repeat-n="repeatNum"></span>

来源:

Github

我想保持我的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>

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

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

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

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