Wie wiederhole ich Elemente in AngularJS eine bestimmte Anzahl von Malen?

Elemente mit AngularJS eine bestimmte Anzahl von Malen wiederholen

Bei der Arbeit mit AngularJS wird die ng-repeat-Direktive häufig zum Durchlaufen von Arrays verwendet und Daten dynamisch anzeigen. Was aber, wenn Sie Elemente unabhängig von einem Array eine bestimmte Anzahl von Malen wiederholen müssen?

Originallösung (vor AngularJS 1.3.0)

Für Versionen Von AngularJS vor 1.3.0 war eine Problemumgehung erforderlich:

1. Erstellen Sie in Ihrem Controller eine Funktion namens getNumber():

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

2. In Ihrem HTML, verwenden Sie die Funktion getNumber() in Ihrem ng-repeat, um die Anzahl der Wiederholungen zu definieren:

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

Aktualisierte Lösung (AngularJS 1.3.0 und höher)

Ab AngularJS 1.3.0 ist die Funktion getNumber() nicht mehr erforderlich:

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

Beispielausgabe

Unter der Annahme von $scope .number auf 5 gesetzt ist, wird die gewünschte Ausgabe gerendert:

<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>

Mit dieser Technik können Sie Elemente dynamisch eine bestimmte Anzahl von Malen wiederholen, was eine größere Flexibilität bei der Erstellung von AngularJS-Vorlagen bietet.

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