ฉันอยากจะพูดถึงฟังก์ชั่นใหม่ของAngularJSng-repeat
คือการทำซ้ำจุดเริ่มต้นและจุดสิ้นสุดพิเศษ มีการเพิ่มฟังก์ชันการทำงานนั้นเพื่อทำซ้ำชุดองค์ประกอบ HTML แทนองค์ประกอบHTML หลักเดียว
ในการใช้จุดเริ่มต้นและจุดสิ้นสุดของทวนคุณต้องกำหนดโดยใช้ng-repeat-start
และng-repeat-end
คำสั่งตามลำดับ
ng-repeat-start
สั่งการทำงานคล้ายกับng-repeat
คำสั่ง ความแตกต่างคือจะทำซ้ำองค์ประกอบ HTML ทั้งหมด (รวมถึงแท็กที่กำหนดไว้) จนถึงแท็กสิ้นสุดที่ng-repeat-end
มีตำแหน่ง (รวมถึงแท็กด้วยng-repeat-end
)
โค้ดตัวอย่าง (จากคอนโทรลเลอร์):
// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...
ตัวอย่างเทมเพลต 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>
ผลลัพธ์จะคล้ายกับตัวอย่างต่อไปนี้ (ขึ้นอยู่กับสไตล์ของ 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]
======================
อย่างที่คุณเห็นให้ng-repeat-start
ทำซ้ำองค์ประกอบ HTML ทั้งหมด (รวมถึงองค์ประกอบด้วยng-repeat-start
) ng-repeat
คุณสมบัติพิเศษทั้งหมด(ในกรณีนี้$first
และ$index
) ยังทำงานได้ตามที่คาดไว้