AngularJS の ng-repeat ディレクティブは, 基本渡された配列に対してループを行う機能しかもっていません.

でも, ただただ指定した回数だけループを回して要素を表示したいって場面ありますよね？ ちょっとした工夫でそれっぽいことを実現できるのでその方法を紹介したいと思います.

Runstant Demo

指定した回数だけループして数値を表示しています.

Code

JavaScript

var app = angular.module('demoApp', []);

app.run(function($rootScope) {  
  $rootScope.range = function(n) {
    var arr = [];
    for (var i=0; i<n; ++i) arr.push(i);

    return arr;
  };
});

HTML

<ul>  
  <li ng-repeat='i in range(3)'>{{$index}}</li>
</ul>  

Detail

まず, $rootScope に range() というメソッドを追加しています. これでどこでも range メソッドを呼べるようになります.

$rootScope.range = function(n) {
  ...
}

中でやってるのは, 渡された数値の回数だけループして配列を作りそれを返しているだけです.

for (var i=0; i<n; ++i) arr.push(i);  

あとは HTML 側の指定です. ng-repeat 内で range に数値を渡して呼び出すだけです.

ng-repeat='i in range(3)'  

は下記と同じになるので

ng-repeat='i in [0, 1, 2]'  

デモのような結果になるといった仕組みです.

Reference

• AngularJS For Loop with Numbers & Ranges - Stack Overflow