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:

    {{ $index 1 }}

Definieren Sie in Ihrem Controller die getNumber-Funktion:

$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);
}

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 Sie eine vereinfachte Lösung an:

    {{ $index 1 }}

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.