配列を使用せずにAngularJSで定義された回数を反復するにはどうすればよいですか?

ng-repeat の代替方法: 定義された回数を反復する

AngularJS では、ng-repeat ディレクティブを使用して要素の配列を反復できます。ただし、特定のシナリオでは、配列がない場合でも特定のテンプレートを複数回繰り返したい場合があります。この記事では、このニーズに対応します。

ソリューション

バージョン 1.3.0 より前の AngularJS は、指定された回数にわたる直接の反復をサポートしていませんでした。回避策には、カスタム関数の導入と配列の操作が含まれます。

変更された ng-repeat 構文は次のとおりです:

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

コントローラーで getNumber 関数を定義します:

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

この関数は、指定された長さの配列を返し、配列の反復動作をシミュレートします。

AngularJS の更新>= 1.3.0

AngularJS の新しいバージョンでは、簡素化されたソリューションが提供されます:

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

このバリエーションでは、カスタム関数の必要性がなくなりました。

結論

どちらの方法も、AngularJS で定義された回数を反復するための柔軟で効率的な方法を提供します。これにより、開発者は動的で適応性のあるユーザー インターフェイスを作成できます。

以上が配列を使用せずにAngularJSで定義された回数を反復するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。