Wie iteriere ich eine definierte Anzahl von Malen in AngularJS ohne Array?

Eine alternative Methode zu ng-repeat: Eine definierte Anzahl von Malen iterieren

In AngularJS ermöglicht uns die ng-repeat-Direktive, über ein Array von Elementen zu iterieren. In bestimmten Szenarien möchten wir jedoch möglicherweise eine bestimmte Vorlage mehrmals wiederholen, auch wenn kein Array vorhanden ist. Dieser Artikel befasst sich mit diesem Bedarf.

Lösung

AngularJS vor Version 1.3.0 unterstützte keine direkte Iteration über eine bestimmte Anzahl von Malen. Die Problemumgehung bestand darin, eine benutzerdefinierte Funktion einzuführen und Arrays zu bearbeiten.

Hier ist die geänderte ng-repeat-Syntax:

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

Definieren Sie in Ihrem Controller die getNumber-Funktion:

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

Diese Funktion gibt ein Array einer angegebenen Länge zurück und simuliert das Verhalten der Iteration über ein Array.

Update für AngularJS >= 1.3.0

Neuere Versionen von AngularJS bieten eine vereinfachte Lösung :

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

Diese Variante macht eine benutzerdefinierte Funktion überflüssig.

Fazit

Beide Methoden bieten eine flexible und effiziente Möglichkeit, eine definierte Anzahl von Malen in AngularJS zu iterieren , wodurch Entwickler dynamische und anpassbare Benutzeroberflächen erstellen können.

Das obige ist der detaillierte Inhalt vonWie iteriere ich eine definierte Anzahl von Malen in AngularJS ohne Array?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!