ทำความเข้าใจกับนิพจน์ 'track by' ของ ngRepeat

ฉันมีปัญหาในการทำความเข้าใจว่าแทร็กโดยการแสดงออกของ ng-repeat ใน angularjs ทำงานอย่างไร เอกสารประกอบหายากมาก: http://docs.angularjs.org/api/ng/directive/ngRepeat

คุณสามารถอธิบายสิ่งที่แตกต่างระหว่างทั้งสองตัวอย่างของรหัสที่อยู่ในแง่ของdatabindingและด้านอื่น ๆ ที่เกี่ยวข้อง?

กับ: track by $index

<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
  <input ng-model="value[key]">                         
</div>

ไม่มี (เอาต์พุตเดียวกัน)

<!--names is an array-->
<div ng-repeat="(key, value) in names">
   <input ng-model="value[key]">                         
</div>

คุณสามารถทำได้track by $indexหากแหล่งข้อมูลของคุณมีตัวระบุที่ซ้ำกัน

เช่น: $scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

คุณไม่สามารถทำซ้ำคอลเล็กชันนี้ได้ในขณะที่ใช้ "id" เป็นตัวระบุ (ซ้ำ id: 1)

จะไม่ทำงาน:

<element ng-repeat="item.id as item.name for item in dataSource">
  // something with item ...
</element>

แต่คุณสามารถทำได้หากใช้track by $index:

<element ng-repeat="item in dataSource track by $index">
  // something with item ...
</element>

สรุปสั้น ๆ :

track by ใช้เพื่อเชื่อมโยงข้อมูลของคุณกับการสร้าง DOM (และส่วนใหญ่สร้างใหม่) ที่ทำโดย ng-repeat

เมื่อคุณเพิ่มtrack byโดยพื้นฐานแล้วคุณบอกเชิงมุมเพื่อสร้างองค์ประกอบ DOM เดียวต่อวัตถุข้อมูลในคอลเลกชันที่กำหนด

สิ่งนี้อาจมีประโยชน์เมื่อทำการเพจและกรองหรือกรณีใด ๆ ที่มีการเพิ่มหรือลบอ็อบเจ็กต์ออกจากng-repeatรายการ

โดยปกติการไม่มีtrack byเชิงมุมจะเชื่อมโยงวัตถุ DOM กับคอลเล็กชันโดยการฉีดคุณสมบัติ expando - $$hashKey- ลงในวัตถุ JavaScript ของคุณและจะสร้างใหม่ (และเชื่อมโยงวัตถุ DOM อีกครั้ง) กับการเปลี่ยนแปลงทุกครั้ง

คำอธิบายแบบเต็ม:

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

คำแนะนำที่เป็นประโยชน์เพิ่มเติม:

http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

(ติดตามได้ในเชิงมุม> 1.2)

หากคุณกำลังทำงานกับอ็อบเจ็กต์ที่ติดตามโดยตัวระบุ (เช่น $ index) แทนอ็อบเจ็กต์ทั้งหมดและคุณโหลดข้อมูลของคุณซ้ำในภายหลัง ngRepeat จะไม่สร้างองค์ประกอบ DOM ใหม่สำหรับไอเท็มที่แสดงผลไปแล้วแม้ว่าอ็อบเจ็กต์ JavaScript ในคอลเล็กชันจะมี ถูกเปลี่ยนตัวใหม่