Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie implementiert man ng-repeat mit fester Länge in AngularJS?

Linda Hamilton
Freigeben: 2024-10-26 19:44:29
Original
747 Leute haben es durchsucht

How to Implement Fixed-Length ng-repeat in AngularJS?

Alternative Ansätze für ng-repeat mit fester Länge

In AngularJS arbeitet ng-repeat normalerweise mit Arrays. Es gibt jedoch Situationen, in denen Sie Elemente eine bestimmte Anzahl von Malen wiederholen müssen. Hier sind zwei mögliche Ansätze:

Option 1: Verwenden einer benutzerdefinierten Funktion

Wenn Sie eine ältere Version von AngularJS (vor 1.3.0) verwenden, können Sie dies tun Definieren Sie eine Funktion, die ein Array der gewünschten Länge zurückgibt:

<code class="html"><li ng-repeat="i in getNumber(number)">
    <span>{{ $index+1 }}</span>
</li></code>
Nach dem Login kopieren
<code class="javascript">$scope.getNumber = function(num) {
    return new Array(num);   
}</code>
Nach dem Login kopieren

Option 2: Verwenden der Constructor-Eigenschaft (AngularJS 1.3.0 und höher)

Für neuere Versionen von AngularJS können Sie die Array.constructor-Eigenschaft nutzen, ohne dass eine Funktion erforderlich ist:

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

Das obige ist der detaillierte Inhalt vonWie implementiert man ng-repeat mit fester Länge in AngularJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!