NgRepeat 'ट्रैक' अभिव्यक्ति द्वारा समझना

Question

मुझे यह समझने में कठिनाई हो रही है कि एनगुलरज में एनजी-रिपीट की अभिव्यक्ति द्वारा ट्रैक कैसे काम करता है। प्रलेखन बहुत दुर्लभ है: http://docs.angularjs.org/api/ng/directive/ngRepeat

क्या आप बता सकते हैं कि डेटाबाइंडिंग और अन्य प्रासंगिक पहलुओं के संदर्भ में कोड के उन दो स्निपेट के बीच क्या अंतर है ?

साथ में: 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>

Comments

बहुत अच्छा जवाब के साथ एक महान सवाल! क्या अफ़सोस ओपी ने एक जवाब स्वीकार नहीं किया - या क्या आपको नहीं लगता कि सवाल का सही जवाब दिया गया था?

— मावग का कहना है कि मोनिका

आप सही हे! मैंने सिर्फ टीजे का जवाब स्वीकार किया।

— जोनाथन ग्रुप

Answer 1

track by $indexयदि आपके डेटा स्रोत में डुप्लिकेट पहचानकर्ता हैं तो आप कर सकते हैं

उदाहरण के लिए: $scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

पहचानकर्ता (डुप्लिकेट आईडी: 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>

Comments

आपके उत्तर के लिए धन्यवाद! लेकिन निश्चित रूप से डुप्लिकेट पहचानकर्ता केवल उपयोग-मामला नहीं हैं। इसके अलावा मैं जानना चाहता हूं कि 'हुड के तहत' क्या हो रहा है।

— जोनाथन ग्रूप

ठीक है, यह आसान है: कोड पर एक नज़र है , यह सब खुले स्रोत है;)

— nilsK

यह प्रश्न पुराना है, लेकिन मुझे अभी भी लगता है कि यह बेहतर bennadel.com/blog/ को समझने में मदद कर सकता है। यहाँ लघु संस्करण docs.angularjs.org/error/ngRepeat/dupes

— अन्नपूर्णा डी

एक और बात ध्यान में रखना है कि यदि आप कुंजी द्वारा ट्रैक का उपयोग कर सकते हैं, तो आपको बेहतर प्रदर्शन मिलेगा (blog.500tech.com/is-reactjs-fast)। यह सुविधा आपको एक अद्वितीय पहचानकर्ता का उपयोग करके जावास्क्रिप्ट ऑब्जेक्ट को एक एनजीआरपेट डीईएम (डॉक्यूमेंट ऑब्जेक्ट मॉडल) नोड के साथ जोड़ने की अनुमति देती है। इस एसोसिएशन के साथ, AngularJS $ नष्ट नहीं करेगा और अनावश्यक रूप से DOM नोड्स को फिर से बनाएगा। यह एक विशाल प्रदर्शन और उपयोगकर्ता अनुभव लाभ ( bennadel.com/blog/… ) हो सकता है।

— ब्रालियो

मेरे पास 700 विषम वस्तुओं की सूची है। रेंडर का समय 4 सेकंड से 100ms तक चला गया। ट्रैक द्वारा इस्तेमाल किया जाना चाहिए सभी ngRepeat के लिए आराम से खट्टा डेटा पर आधारित है।

— पैट्रिक

Answer 2

एक संक्षिप्त सारांश:

track by आपके डेटा को DOM- (और मुख्य रूप से री-जेनरेशन) एनजी-रिपीट द्वारा बनाए गए लिंक से जोड़ने के लिए उपयोग किया जाता है।

जब आप जोड़ते हैं track byतो आप मूल रूप से दिए गए संग्रह में डेटा ऑब्जेक्ट प्रति एक डोम तत्व उत्पन्न करने के लिए कोणीय बताते हैं

यह उपयोगी हो सकता है जब पेजिंग और फ़िल्टरिंग, या कोई भी मामला जहां ऑब्जेक्ट्स को जोड़ा जाता है या ng-repeatसूची से हटाया जाता है ।

आमतौर पर, track byकोणीय के बिना DOM के ऑब्जेक्ट्स को एक एक्सपेंडो प्रॉपर्टी में इंजेक्ट करके संग्रह के साथ जोड़ दिया जाएगा - $$hashKey- आपके जावास्क्रिप्ट ऑब्जेक्ट्स में, और हर बदलाव के साथ इसे (और 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 में उपलब्ध है)

Answer 3

यदि आप पूरे ऑब्जेक्ट के बजाय पहचानकर्ता (जैसे $ इंडेक्स) द्वारा ऑब्जेक्ट ट्रैक कर रहे हैं और आप अपने डेटा को बाद में पुनः लोड करते हैं, तो ngRepeat उन आइटमों के लिए DOM तत्वों का पुनर्निर्माण नहीं करेगा , जो पहले ही रेंडर किए गए हैं , भले ही संग्रह में जावास्क्रिप्ट ऑब्जेक्ट्स हों नए लोगों के लिए प्रतिस्थापित किया गया है।

Comments

किसी भी संदर्भ जो यह साबित करता है?

— अजराफती

वहाँ फिर से प्रस्तुत करने के लिए मजबूर करने का एक तरीका है? या किसी भी अन्य काम के आसपास? मैंने इसका कहीं भी उल्लेख नहीं किया है, लेकिन मेरा मानना ​​है कि यह मेरे लिए एक गड़बड़ है और मैंने पहले ही बहुत समय बर्बाद कर दिया है।

— NeverGiveUp161

या तो ट्रैक का उपयोग न करें या बदलती वस्तु पर अद्वितीय पहचानकर्ता को न बदलें। ध्यान दें कि आप $ इंडेक्स को बदल नहीं सकते हैं, इसकी सिफारिश $ इंडेक्स का उपयोग नहीं करने के बजाय आइडेंटिफ़ायर यूनीक टू ऑब्जेक्ट (उदाहरण के लिए आईडी) करें

— ram1993