Angular.js: ng- كرر المسار بواسطة $ index مع التوجيه المخصص

تم إنشاؤها على ١٥ نوفمبر ٢٠١٧  ·  3تعليقات  ·  مصدر: angular/angular.js

أنا أرسل ...

  • [ ] تقرير الشوائب
  • [ ] طلب المواصفات
  • [X] أخرى

السلوك الحالي:

بعد التصفية والمصفوفة التي يتم تكرارها ولها توجيه مخصص في كل عنصر مكرر له نطاق معزول. لم يتم إعادة بدء التوجيه المخصص.

أفترض أن هذا سلوك متوقع ولكنه قد يكون محيرًا ويجب توضيح ما يمكن أن يفعله وضع track by $index لتوجيهاتك المخصصة.

السلوك المتوقع / الجديد:
غير متوفر

الحد الأدنى من استنساخ المشكلة بالتعليمات:

  1. إنشاء ng كرر باستخدام توجيه مخصص بالداخل (بما في ذلك track by $ index)
  2. باستخدام $ filter على مصفوفة التكرار ، قم بترشيح المصفوفة وستلاحظ أن البيانات الموجودة في التوجيه لن تعكس المصفوفة التي تمت تصفيتها الجديدة

إصدار AngularJS: 1.5.10

المتصفح: الكل

هل من شيء آخر:

هل يمكن جعل المستندات أكثر وضوحًا بين ما يفعله Angular عند استخدام track by وبين استخدام $index مع توجيهات مخصصة لن يعمل.

تحقق من إجابتي هنا لمعرفة تفاصيل المشكلة
https://stackoverflow.com/a/47310734/2536454

ngRepeat docs

التعليق الأكثر فائدة

أعتقد أن هذا هو السلوك المتوقع بالفعل. نقلا عن المستندات :

عند إعادة ترتيب العناصر ، يتم إعادة ترتيب القوالب الخاصة بكل منها في DOM.

لتقليل إنشاء عناصر DOM ، يستخدم ngRepeat وظيفة "لتتبع" جميع العناصر في المجموعة وعناصر DOM المقابلة لها. على سبيل المثال ، إذا تمت إضافة عنصر إلى المجموعة ، فإن ngRepeat سيعرف أن جميع العناصر الأخرى بها بالفعل عناصر DOM ، ولن يعيد تصييرها.

في مثل هذه الحالات (عند استخدام track by $index ) ، سيتطابق عنصر DOM التاسع دائمًا مع العنصر n من المصفوفة ، لذلك لن يتم تحديث الارتباطات الموجودة على هذا العنصر حتى عندما يتغير العنصر المقابل ، مما يتسبب في الأساس في حدوث عرض للخروج من المزامنة مع البيانات الأساسية.

بتجميعها معًا ، ما يحدث هو أن التتبع بمقدار $index ، يخبر ngRepeat أن العنصر الأول دائمًا هو نفسه (نظرًا لأنه يحتوي على نفس الفهرس). لا يعرف ngRepeat أن البيانات الأساسية قد تغيرت ، لأنك تخبره أنه طالما أن الفهرس هو نفسه ، فإن العنصر هو نفسه (في الممارسة العملية ، نادرًا ما يكون التتبع بواسطة $index مفيدًا) .

نظرًا لأن العناصر ngRepeat هي أن العنصر هو نفسه ، فلن يعيد إنشاء DOM ، ولكنه يحتفظ بالعنصر الحالي (المرتبط بالنطاق الحالي وما إلى ذلك). وبالتالي فإن أي توجيهات تظهر على tempate لن يتم إعادة تجميعها (نظرًا لأن التجميع / الارتباط يحدث فقط عند "القضاء على" مثيل جديد).

لكنني أعترف أننا لا نقوم بعمل جيد للغاية في شرح ذلك في المستندات: ابتسامة:
@ michael-letcher ، هل أنت مهتم بإرسال علاقات عامة لتحسين المستندات؟

ال 3 كومينتر

هل هناك احتمال أن تكون أكثر تحديدًا (أو تقديم عينة تكاثر)؟
يمكنك البدء من هذا المخطط لإعادة إنتاج المشكلة ، حيث يبدو أنها تعمل بشكل جيد بالنسبة لي.

https://plnkr.co/edit/dxzgjmE5MEA0bwQdckVS؟p=preview

أعتقد أن هذا هو السلوك المتوقع بالفعل. نقلا عن المستندات :

عند إعادة ترتيب العناصر ، يتم إعادة ترتيب القوالب الخاصة بكل منها في DOM.

لتقليل إنشاء عناصر DOM ، يستخدم ngRepeat وظيفة "لتتبع" جميع العناصر في المجموعة وعناصر DOM المقابلة لها. على سبيل المثال ، إذا تمت إضافة عنصر إلى المجموعة ، فإن ngRepeat سيعرف أن جميع العناصر الأخرى بها بالفعل عناصر DOM ، ولن يعيد تصييرها.

في مثل هذه الحالات (عند استخدام track by $index ) ، سيتطابق عنصر DOM التاسع دائمًا مع العنصر n من المصفوفة ، لذلك لن يتم تحديث الارتباطات الموجودة على هذا العنصر حتى عندما يتغير العنصر المقابل ، مما يتسبب في الأساس في حدوث عرض للخروج من المزامنة مع البيانات الأساسية.

بتجميعها معًا ، ما يحدث هو أن التتبع بمقدار $index ، يخبر ngRepeat أن العنصر الأول دائمًا هو نفسه (نظرًا لأنه يحتوي على نفس الفهرس). لا يعرف ngRepeat أن البيانات الأساسية قد تغيرت ، لأنك تخبره أنه طالما أن الفهرس هو نفسه ، فإن العنصر هو نفسه (في الممارسة العملية ، نادرًا ما يكون التتبع بواسطة $index مفيدًا) .

نظرًا لأن العناصر ngRepeat هي أن العنصر هو نفسه ، فلن يعيد إنشاء DOM ، ولكنه يحتفظ بالعنصر الحالي (المرتبط بالنطاق الحالي وما إلى ذلك). وبالتالي فإن أي توجيهات تظهر على tempate لن يتم إعادة تجميعها (نظرًا لأن التجميع / الارتباط يحدث فقط عند "القضاء على" مثيل جديد).

لكنني أعترف أننا لا نقوم بعمل جيد للغاية في شرح ذلك في المستندات: ابتسامة:
@ michael-letcher ، هل أنت مهتم بإرسال علاقات عامة لتحسين المستندات؟

ماذا او ما

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

jtorbicki picture jtorbicki  ·  3تعليقات

th0r picture th0r  ·  3تعليقات

awerlang picture awerlang  ·  3تعليقات

ashclarke picture ashclarke  ·  3تعليقات

brijesh1ec picture brijesh1ec  ·  3تعليقات