AngularJS で要素を特定の回数繰り返すにはどうすればよいですか?

AngularJS で要素を特定の回数繰り返す

AngularJS を使用する場合、配列を反復するために ng-repeat ディレクティブがよく使用されます。データを動的に表示します。ただし、配列に関係なく、要素を特定の回数繰り返す必要がある場合はどうすればよいでしょうか?

元のソリューション (AngularJS 1.3.0 以前)

バージョンについてAngularJS 1.3.0 より前のバージョンでは、次の回避策が必要でした。

1. コントローラーに getNumber() という関数を作成します。

<code class="js">$scope.getNumber = function(num) {
    return new Array(num);   
}</code>

2. HTML の場合、ng-repeat で getNumber() 関数を使用して、繰り返す回数を定義します。

<code class="html"><li ng-repeat="i in getNumber(number) track by $index">
    <span>{{ $index+1 }}</span>
</li></code>

更新されたソリューション (AngularJS 1.3.0 以降)

AngularJS 1.3.0 以降、getNumber() 関数の必要性はなくなりました。

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

出力例

$scope を想定.nu​​mber を 5 に設定すると、目的の出力がレンダリングされます:

<code class="html"><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></code>

この手法を使用すると、要素を特定の回数だけ動的に繰り返すことができ、AngularJS テンプレート作成の柔軟性が高まります。

以上がAngularJS で要素を特定の回数繰り返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。