ホームページ  >  記事  >  ウェブフロントエンド  >  AngularJS で ng-repeat を使用して要素を特定の回数繰り返すにはどうすればよいですか?

AngularJS で ng-repeat を使用して要素を特定の回数繰り返すにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-26 19:49:02889ブラウズ

How can I repeat an element a specific number of times using ng-repeat in AngularJS?

ng-repeat で定義された回数を反復する

伝統的に、ng-repeat は配列要素を反復しますが、場合によっては、具体的な回数。この記事では、まさにそれを実現する便利な方法について説明します。

配列の反復の置換

1 から 5 までの増分番号を付けて項目のリストを 5 回表示するシナリオを考えてみましょう。配列に依存する場合、次のアプローチを採用できます:

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

getNumber 関数の定義

コントローラーで、getNumber 関数は必要な長さの配列を作成します:

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

AngularJS バージョンの影響

1.1.5 より前のバージョンの AngularJS の場合は、上記で十分です。ただし、バージョン 1.1.5 以降では、$index 属性による追加のトラックを ng-repeat ディレクティブで指定する必要があります。

使用法と柔軟性

このアプローチを使用すると、$ を動的に変更できます。必要な反復回数を維持しながら、scope.number を任意の値に変更します。この手法は、AngularJS アプリケーションでの繰り返しを処理する便利な方法を提供します。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。