1. ホーム
  2. javascript

[解決済み] 配列上で繰り返すのではなく、定義された回数をng-repeatする方法?

2022-03-24 23:42: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>

解決方法は?

更新情報(2018/9/25)

AngularJSの新しいバージョン(>= 1.3.0)では、変数だけでできるようになりました(関数が不要)。

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

$scope.number = 5;

質問された当初は不可能でした。 この更新については、以下の @Nikhil Nambiar 氏の回答がクレジットされています。


オリジナル(2013/5/29)

現時点では 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 関数を使用します。