☰

配列を繰り返す代わりに、定義した回数だけ ng-repeat する方法はありますか? 質問する

tag-icon • tag-icon javascript html angularjs angularjs-ng-repeat
配列を繰り返す代わりに、定義した回数だけ ng-repeat する方法はありますか? 質問する

ng-repeat配列を常に反復処理するのではなく、定義された回数だけ反復処理する方法はありますか?

たとえば、以下のリスト項目は5回表示され、$scope.number5に等しいと仮定して、さらに番号を増やして各リスト項目が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>

ベストアンサー1

更新 (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関数を使用するリストがいくつかあります。

おすすめ記事