Saya juga ingin menyebutkan fungsionalitas baru AngularJSng-repeat
, yaitu, titik awal dan akhir pengulangan khusus . Fungsionalitas itu ditambahkan untuk mengulang serangkaian elemen HTML, bukan hanya satu elemen HTML induk .
Untuk menggunakan titik awal dan akhir pengulang Anda harus mendefinisikannya dengan menggunakan ng-repeat-start
danng-repeat-end
masing-masing arahan.
The ng-repeat-start
direktif bekerja sangat mirip dengan ng-repeat
direktif. Perbedaannya adalah bahwa ini akan mengulangi semua elemen HTML (termasuk tag yang telah ditetapkannya) hingga tag HTML yang berakhir di mana ng-repeat-end
ditempatkan (termasuk tag dengan ng-repeat-end
).
Kode sampel (dari pengontrol):
// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...
Contoh template HTML:
<div ng-repeat-start="(id, user) in users">
==== User details ====
</div>
<div>
<span>{{$index+1}}. </span>
<strong>{{id}} </strong>
<span class="name">{{user.name}} </span>
<span class="age">({{user.age}})</span>
</div>
<div ng-if="!$first">
<img src="/some_image.jpg" alt="some img" title="some img" />
</div>
<div ng-repeat-end>
======================
</div>
Output akan terlihat mirip dengan yang berikut ini (tergantung pada gaya HTML):
==== User details ====
1. 119827 Stephan (18)
======================
==== User details ====
2. 182982 John (30)
[sample image goes here]
======================
==== User details ====
3. 198784 Antonio (32)
[sample image goes here]
======================
Seperti yang Anda lihat, ng-repeat-start
ulangi semua elemen HTML (termasuk elemen dengan ng-repeat-start
). Semua ng-repeat
properti khusus (dalam hal ini $first
dan $index
) juga berfungsi seperti yang diharapkan.