Bagaimana untuk Mengulangi Elemen Bilangan Kali Tertentu dalam AngularJS?

Mengulang Elemen Bilangan Kali Tertentu dengan AngularJS

Apabila bekerja dengan AngularJS, arahan ng-repeat sering digunakan untuk mengulangi tatasusunan dan memaparkan data secara dinamik. Walau bagaimanapun, bagaimana jika anda perlu mengulang elemen beberapa kali tertentu, tanpa mengira sebarang tatasusunan?

Penyelesaian Asal (pra-AngularJS 1.3.0)

Untuk versi daripada AngularJS sebelum 1.3.0, penyelesaian diperlukan:

1. Buat fungsi dalam pengawal anda dipanggil getNumber():

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

2. Dalam anda HTML, gunakan fungsi getNumber() dalam ng-repeat anda untuk menentukan bilangan kali mengulang:

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

Penyelesaian Kemas Kini (AngularJS 1.3.0 dan ke atas)

Bermula dengan AngularJS 1.3.0, keperluan untuk fungsi getNumber() dihapuskan:

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

Contoh Output

Andaikan $scope .number ditetapkan kepada 5, output yang diingini akan dipaparkan:

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

Teknik ini membolehkan anda mengulang elemen secara dinamik beberapa kali, memberikan fleksibiliti yang lebih besar dalam penciptaan templat AngularJS.

Atas ialah kandungan terperinci Bagaimana untuk Mengulangi Elemen Bilangan Kali Tertentu dalam AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!