Angular.js: ng كرر مع DL / DD / DT

ثاني هذا. أواجه هذه المشكلة منذ فترة.

قامIgorMinar ببعض الأعمال على

ماذا عن السماح للنماذج داخل أزواج مثل {{}}

يمكن:
{{! ng-تكرار = "foo in l"

في ملاحظة ذات صلة ، لدي مشكلة مماثلة مع هل ستكون هناك تحديات فنية كبيرة في نموذج الاستيفاء الثاني
مثل {{{}}} الذي لم يفلت من أحرف html ولكنه أيضًا لم ينشئ ملف
فترة جديدة؟

يوم الثلاثاء ، 29 يناير 2013 الساعة 12:38 مساءً ، بيت بيكون داروين <
[email protected]> كتب:

قامIgorMinar https://github.com/IgorMinar ببعض الأعمال على ملف
تكرار قائم على التعليق (# 1646https: //github.com/angular/angular.js/issues/1646)
ولكن نظرًا لأن التعليقات لا تعمل جيدًا على جميع المتصفحات ، فمن غير المحتمل أن تفعل ذلك
يتم دمجها. بدلا من ذلك يبحثون عن حل بديل ، على الأرجح
باستخدام "علامات تكرار البداية والنهاية" أو "تكرار البدء وعدد
عناصر لتكرار التسمية "

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/1891#issuecomment -12856484.

لقد واجهت هذه المشكلة مع جدول يريد إنشاء عنصرين "td" لكل كائن في مصفوفة.

+1 لإضافة هذه الميزة. فقط واجهت هذا القيد نفسه.

:ممتاز:

نفس المشكلة هنا. أود أن أرى شيئًا مثل "ng-repart-children" يكرر الأطفال فقط ولكن ليس العنصر الحالي أو نوعًا من "ng-omit-tag" (الذي يزيل العلامة الحالية ولكنه يترك الأطفال في مكانه) ليتم استخدامه مع ng- كرر. هذا من شأنه تجنب الكثير من العلامات غير الصالحة التي تم إنشاؤها لحل هذه المشكلة.

لا تفهم تماما القيود التي هي قيد المناقشة. لماذا يعمل وضع ng-تكرار على العنصر الأصل؟ http://jsfiddle.net/JyWdT/13/
هل يمكن لشخص أن يبتكر كمانًا يشرح المشكلة بمزيد من التفصيل؟

lgalfaso ، يقوم كمانك بإنشاء قوائم تعريف متعددة لكل منها تعريف واحد. الإخراج المطلوب هو قائمة تعريف واحدة مع تعريفات متعددة.

أو في حالتي ، أحتاج إلى إنشاء زوج من العناصر "td" لكل عنصر في المصفوفة.
لنفترض أن لدي مجموعة ،

[{name:dan, age:15}, {name:steve, age:21}]

وأحتاج إلى إخراج:

<tr><td>dan</td><td>15</td><td>steve</td><td>21</td></tr>

لا توجد طريقة لتحقيق ذلك باستخدام الزاوي في هذا الوقت.

ألا يمكنك فعل ذلك بوضع ng-تكرار على عنصر tr؟

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE؟p=preview

في الأحد 21 أبريل 2013 الساعة 2:24 مساءً ، كتب zilles [email protected] :

lgalfaso ، كمان الخاص بك يخلق قوائم تعريف متعددة مع كل واحد
تعريف. الإخراج المطلوب هو قائمة تعريف واحدة متعددة
تعريفات.

أو في حالتي ، أحتاج إلى إنشاء زوج من العناصر "td" لكل عنصر في
مجموعة.
لنفترض أن لدي مجموعة ،

[{ name: dan ، age: 15 }، { name: steve ، age: 21 }]

وأحتاج إلى إخراج:

دان15ستيف21

لا توجد طريقة لتحقيق ذلك باستخدام الزاوي في هذا الوقت.

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/1891#issuecomment -16716788
.

أوه ، أرى ، تجاهل تعليقي السابق
في 21 نيسان (أبريل) 2013 ، الساعة 9:09 صباحًا ، "jason turim" jason. كتب [email protected] :

ألا يمكنك فعل ذلك بوضع ng-تكرار على عنصر tr؟

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE؟p=preview

في الأحد 21 أبريل 2013 الساعة 2:24 مساءً ، كتب zilles [email protected] :

lgalfaso ، كمان الخاص بك يخلق قوائم تعريف متعددة مع كل واحد
تعريف. الإخراج المطلوب هو قائمة تعريف واحدة متعددة
تعريفات.

أو في حالتي ، أحتاج إلى إنشاء زوج من العناصر "td" لكل عنصر في
مجموعة.
لنفترض أن لدي مجموعة ،

[{ name: dan ، age: 15 }، { name: steve ، age: 21 }]

وأحتاج إلى إخراج:

دان15ستيف21

لا توجد طريقة لتحقيق ذلك باستخدام الزاوي في هذا الوقت.

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/1891#issuecomment -16716788
.

نظرًا لأنني واجهت للتو مشكلة dl / dt + dd ، أؤكد أن ng-تكرار الأطفال الجديد (أو ng-تكرار-داخلي) هو توجيه إلزامي مفقود.

+1

اقتراح لتوجيه جديد ng- تكرار-داخلي. إذا كان هذا الاقتراح على ما يرام ، فسيقوم بتعديل جميع الأدلة

أعتقد أنه سيكون من الأفضل استخدام نفس التوجيه ng-repeat ، لكن مع السماح باستخدام هذا التوجيه في تعليقات HTML ، كما يقترح المنشور الأصلي.

يجب أن يعمل شيء من هذا القبيل بعد ذلك:

<dl>
  <!-- ng-repeat="(name, definition) in myList" -->
  <dt>{{name}}</dt>
  <dd>{{definition}}</dd>
  <!-- /ng-repeat -->
</dl>

لست متأكدًا تمامًا من كيفية تحقيق بداية ونهاية الكتلة المراد تكرارها (تم اقتراح <!-- /ng-repeat --> بواسطة @ ProLoser) ، لكنني أعتقد أن استخدام تعليقات HTML سيكون حلاً أنيقًا.

بالنظر إلى أن المصغرات يمكن أن تقتل التعليقات وغيرها من القضايا المتعلقة بالتعليقات ، فأنا
لا أعتقد أن هذا رائع. ومع ذلك ، تعجبني فكرة استخدام ng-repart.
هل من الممكن تضمين سمة ng-تكرار-مفرد-جذر أو
الشيء الذي عند ضبطه على صحيح ، سيُشغل ng-تكرار بدون الجذر
عنصر؟ على سبيل المثال:

{أنا}

{أنا}

قد يصبح:

1

1

2

2

3

3

الثلاثاء، 23 أبريل 2013 في 03:54، ماني Tadayon [email protected] :

أعتقد أنه سيكون من الأفضل استخدام نفس التوجيه ng-تكرار ، لكن السماح
من أجل استخدام هذا التوجيه في تعليقات HTML ، باعتباره المنشور الأصلي
وتقترح.

يجب أن يعمل شيء من هذا القبيل بعد ذلك:

{{اسم}}

{{تعريف}}

لست متأكدًا تمامًا من كيفية تكرار بداية ونهاية الكتلة
سوف يتحقق (لقد اختلقتفي المثال الخاص بي) ،
لكني أعتقد أن استخدام تعليقات HTML سيكون حلاً رائعًا.

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/1891#issuecomment -16891970
.

maxcan ، يمكنني رؤية مزايا "Single-root" ، نظرًا لأنك تحتفظ بمصدر html صالحًا ، لكن هذا البناء لا يسمح لك بإضافة أي شيء آخر داخل علامة "dl" ... تعريف ثابت على سبيل المثال تريده لتضمينها قبل حلقة التعريفات الديناميكية. حل lgalfaso سيتعامل مع ذلك.

maxcan بدون إعادة صياغة كبيرة أو نجاح في الأداء ، لا أعتقد أنه من الممكن إضافة هذه الخاصية ng-repro-single-root (حسنًا ، قم بإضافتها وجعلها ديناميكية بناءً عليها). السبب المنطقي هو أن هناك احتمالًا كبيرًا أن يؤدي التغيير في هذه الخاصية إلى إعادة تجميع [ولا أحد يحب إعادة التجميع]

يعجبني اقتراحbowserseers ، لكنني أفضل أن يكون هذا التعليق الختامي: <!-- /ng-repeat -->

هذا عار على الأداء. على أي حال ، أنا أؤيد بشدة
حل lgalfaso ، بافتراض أنه يمكنك وضع التوجيه في div وليس
مجرد تعليق ..

يوم الأربعاء ، 24 أبريل 2013 في تمام الساعة 1:58 مساءً ، كتب Dean Sofer [email protected] :

يعجبني اقتراحbowsersenior https://github.com/bowserseers ، لكن
أفضل هذا كتعليق ختامي:

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/1891#issuecomment -16964155
.

أتفق مع ProLoser على أن <!-- /ng-repeat --> هو علامة إغلاق أفضل في أسلوب تعليقات HTML. ملاحظة واحدة ، الزاوية تسمح بتحديد التوجيهات في تعليقات HTML ، لذلك لا أعتقد أنه يمكن تجاهل تعليقات HTML كحل محتمل لهذه المشكلة. ضع في اعتبارك أن مطوري الزوايا الأساسيين أشاروا إلى أنهم خططوا لاستخدام تعليقات HTML لمعالجة هذه المشكلة في سؤال تجاوز سعة المكدس هذا (كما أشار الملصق الأصلي):

• http://stackoverflow.com/a/10458127/457819

لا أمانع في التخلص منها طالما أن هناك طريقة للقيام بذلك بدونها
تعليقات.

يوم الأربعاء ، 24 أبريل 2013 الساعة 2:41 ظهرًا ، ماني تضايون إخطارات github.com

أنا أتفق مع ProLoser https://github.com/ProLoser ذلك هي علامة إغلاق أفضل في أسلوب تعليقات HTML. واحد
note ، angular يسمح بتعريف التوجيهات في تعليقات HTML ، لذلك لا أفعل
أعتقد أنه يمكن تجاهل تعليقات HTML كحل محتمل لهذا
مشكلة. ضع في اعتبارك أن المطورين الأساسيين أشاروا إليهم
من المخطط استخدام تعليقات HTML لمعالجة هذه المشكلة في تجاوز سعة المكدس هذا
السؤال (كما أشار الملصق الأصلي):

• http://stackoverflow.com/a/10458127/457819

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/1891#issuecomment -16969268
.

+1 لـ lgalfaso ng- تكرار-داخلي. أود أخيرًا شيئًا ينجز هذا.

الضربة القاضية تفعل هذا مع التعليقات. أحاول نقل شيء قمت به باستخدام علامة dl في الضربة القاضية ويبدو أن هذا غير ممكن حتى تتم معالجة هذه المشكلة.

هذا رأيي ، لذلك بدون إدخال من mhevery أو IgorMinar ، خذ هذا
أرى أن جعل عمل ng-تكرار مع التعليقات أكثر مرونة ، على أي حال فإنه لا يبدو طبيعيًا بدون تغيير إلى المترجم $ لذا يمكنه التعامل مع توجيه من النوع "بين التعليقات". السبب هو أنه يبدو غريبًا أن التوجيه يحتاج إلى الاهتمام بالتداخل والنظر خارج العنصر الذي يُعطى للقيام بما يفترضه

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

ومع ذلك ، في معظم الحالات ، يبدو لي أنه إذا كان ng-repart-inner يشير إلى تكرار مجموعة من العناصر "داخل" شيء معين ، فهذا يعني أنه في معظم الحالات قمت بالفعل بإنشاء حاوية خارجية حصرية من نوع ما. ومن ثم ، في حين أن تنفيذ التعليق قد يكون أكثر تنوعًا (على الرغم من أنه ربما يكون هناك نصف سطور إضافية من التعليمات البرمجية التي أود تجنبها إذا كان ذلك ممكنًا) ، أشعر أنه قد يكون أقل استخدامًا (وربما يجب أن يكون أقل أولوية) من توجيه داخل العنصر.

لا علاقة لمسألة استخدام تعليقات HTML بحقيقة أن هذه المشكلة ظلت معلقة لبضعة أشهر. أعتقد أن كل ما هو مطلوب هو بعض الاهتمام من المشرفين الزوايا لاتخاذ قرار بشأن المشكلة وتنفيذ حل.

في حالة فاتتك ، انظر هنا https://github.com/angular/angular.js/pull/1646 فيما يتعلق بالمشاكل المتعلقة بالمكررات القائمة على التعليقات. حل lgalfaso واعد أكثر في هذه المرحلة.

شكرا للإشارة إلى # 1646. هناك تعليق في هذه المناقشة من mhevery يقترح "طريقة أفضل للقيام بذلك" دون إظهار أي رمز (ربما يكون خطأ في التنسيق):

أتمنى لو عرفنا ما كانت هذه "الطريقة الأفضل"!

الإجماع في الفريق الأساسي هو أن أفضل طريقة حاليًا للتعامل مع هذه المشكلة هي واحدة مما يلي (لم نستقر على بناء الجملة ولكن التنفيذ هو نفسه تقريبًا لكل هذه):

تحتوي كل هذه الأمثلة على علامتين td ، لقد فعلت ذلك عن قصد على الرغم من أنه غير قانوني لأنني أردت إظهار أن المكرر يجب أن يسمح بالتكرار على عدد عشوائي من العناصر - سيكون من الأفضل تحويل هذه الأمثلة لاستخدام الجدول وصفوف الجدول ، ولكنني على وشك الانتقال إلى وضع عدم الاتصال الآن وليس لدي الوقت لإعادة بنائها.

بناء الجملة أ:

<dl>
  <dt ng-repeat="(name, definition) in myList">{{name}}</dt>
  <dd ng-repeat-next>{{definition}}</dd>
  <dd ng-repeat-next>{{definition}}</dd>
</dl>

بناء الجملة ب:

<dl>
  <dt ng-repeat-start="(name, definition) in myList">{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

بناء الجملة ج:

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-start>{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

بناء الجملة د:

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-group>{{name}}</dt>
  <dd ng-repeat-group>{{definition}}</dd>
  <dd ng-repeat-group>{{definition}}</dd>
</dl>

على المدى الطويل ، بمجرد أن نحصل على دعم أفضل للمتصفح ، سنبدأ في استخدام عنصر <template> والذي سيسمح لنا بالقيام بذلك ببساطة:

بناء الجملة X:

<template>
  <dl>
    <ng repeat="(name, definition) in myList">
      <dt>{{name}}</dt>
      <dd>{{definition}}</dd>
      <dd>{{definition}}</dd>
    </ng>
  </dl>
</template>

إذا أراد أي شخص صياغة علاقات عامة لهذا الحل ، فسيتم دمجه. أيضًا إذا كان لديك تفضيل لبناء جملة معين ، فيرجى التحدث بصراحة.

شكرا على الادخال. من وجهة نظري ، بناء الجملة A ليس واضحًا للحلقات المتداخلة مثل ما يلي

<dl>
  <dt ng-repeat="...">loop 1</dt>
  <dt ng-repeat="..." ng-repeat-next>loop 2</dt>
  <dd ng-repeat-next>is this within loop 2 or only loop 1</dd>
</dl>

بناء الجملة B و C متشابهان تقريبًا ، فأنا أحب كلا البديلين (حتى عندما أعتقد أن بناء الجملة B أفضل إلى حد ما)

ما لم أفقد شيئًا ما ، فإن بناء الجملة D له نفس مشكلات الحلقات المتداخلة مثل بناء الجملة A

سأختار B إن أمكن ، بسبب الاضطرار إلى كتابة أقل عدد من الأحرف. يبدو أيضًا أكثر تناسقًا - أشعر أنه سيكون من الأسهل إدارته بسبب التناظر البصري.

يشير تعليق lgalfasos إلى معضلة مثيرة للاهتمام. ماذا لو كانت الحلقة المتداخلة في مثاله على العنصر الأول بدلاً من الثاني. ثم أصبحت جميع إصدارات بناء الجملة غير واضحة الآن ، إلا إذا فاتني شيء ما.

لا أفهم تمامًا الفرق بين ng-repeat-inner اقترحه lgalfaso و ng repeat في التركيب X ، على الرغم من غلاف <template> . هل يمكن لأحد أن يشرح؟

لست متأكدًا من أنني أفهمها أيضًا ، لكنني أعتقد أن علامة <ng> لا تصبح جزءًا من DOM ، وبالتالي تجنب بنية التعشيش غير القانونية تحت dl .

بالنسبة للصيغ المقترحة ، سأصوت لصالح B.

أعتقد أن حالة بناء الجملة X تسمح بعنصر غلاف وهمي عام <ng> وهو ليس جزءًا من DOM ويمكنه استضافة توجيهات متنوعة. هذا أكثر عمومية من ng-repeat-inner ، والذي ينطبق فقط على حالة استخدام معينة لـ ng-repeat .

إذا كان بناء الجملة X ، الهدف طويل المدى ، هو مجرد إصدار أكثر عمومية من ng-repeat-inner ، أشعر أن ng-repeat-inner يجب أن يتم اعتماده أيضًا (* ليس فقط) على طول أحد المقترحات A ، B ، ج ، د لما يلي:

1. كل من بناء الجملة X و ng-repeat-inner لهما نفس بنية dom
   : إذا كان بناء الجملة X هو الهدف طويل المدى ، فسيكون من الجيد أن يكون لديك شيء الآن يتوافق مع الهيكل بطريقة مماثلة لمنع إعادة البناء في المستقبل.
2. في معظم الحالات ، يكفي ng-repeat-inner أي حال
   : القصد هو إنشاء حاوية خارجية لتكرار العناصر الداخلية.

@ daegon123 الفرق بين أي من التركيبات المدرجة في ng-repeat-inner هو أن الصيغ تسمح لك بتكرار مجموعة من العناصر بشكل تعسفي بدون حاوية مميزة. على سبيل المثال ، كرر مجموعة من <tr> s بينما هناك أخرى غير متكررة <tr> s في table أو tbody . في هذه الحالة ، لا تحتوي العناصر المراد تكرارها على أصل مميز لربط ng-repeat-inner به.

<table>
    <thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

أو تعريفات متعددة لكل كائن في <dl>

<dl>
    <dt ng-repeat-start="...">{{item.term1}}</dt>
    <dd>{{item.def1}}</dd>
    <dt>{{item.term2}}</dt>
    <dd>{{item.def2}}</dd>
    <dt>{{item.term3}}</dt>
    <dd ng-repeat-end>{{item.def3}}</dd>
</dl>

@ es128 شكرا على التعليقات والرمز. هذا هو بالضبط السبب الذي دفعني إلى اقتراح قبول ng-repeat-inner "على طول" إحدى الصيغ الأخرى المدرجة ، لكن رؤية الكود الفعلي في تعليقاتك جعلني أتساءل عما إذا كانت هناك حاجة إلى ng-repeat-inner . سأنشر تعليقًا آخر إذا صادفت شيئًا - شكرًا مرة أخرى!

مشكلة ng-repart-inner هي أنه لا يمكن استخدامه في جميع الحالات ، على سبيل المثال:

<ul>
  <li>some static prefix item</li>
  <!-- repeat these nodes -->
    <li>{{ something }}</li>
    <li>{{ something else }}</li>
  <!-- repeat end -->
  <li>some static postfix item</li>
</ul>

نظرًا لأنه لا يمكنك وضع عنصر اصطناعي (مثل div) في ul (وفقًا لمواصفات html) ، فلا يمكن استخدام ng-repart-inner هنا.

راجع للشغل باستخدام عنصر القالب ، سنكون قادرين على وضع عنصر اصطناعي بين ul و li.

لا تعلق أيضًا بشكل كبير على بناء الجملة X ، لقد كان مجرد مثال سريع وقذر لما سنتمكن في النهاية من القيام بالصياغة الدقيقة لم تتم مناقشته بعد ، ولكن أثناء تواجدي فيه ، إليك مثال آخر واحد:

بناء الجملة ص:

<ul>
  <li>some static prefix item</li>
  <template repeat="item in items">
    <li>{{ item.name }}</li>
    <li>{{ item.owner }}</li>
  </template>
  <li>some static postfix item</li>
</ul>

ماذا عن تعيين معرف لمجموعة التكرار ng؟
ثم يمكننا إرفاق العناصر به بحرية من أي مستوى. شيء مثل

<dl>
    <dt ng-repeat="item in items" ng-repeat-group="someId">{{item.term}}</dt>
    <dd ng-repeat-with="someId">{{item.definition}}</dd>
</dl>

يمكن أن تسمح بالمرونة التي نحتاجها.

التنفيذ المقترح لبناء الجملة C ، تبين أنني أعتقد أن هذا هو التركيب اللغوي الذي من شأنه أن يسمح لنفس الآلية أن تكون سهلة للعناصر والتوجيهات الأخرى

عمل جميل لوكاس! لقد أمضيت المساء أحاول تنفيذ بناء الجملة C. إنه يعمل بشكل صحيح ، لكن التداخل غير مدعوم بسبب التحويل الذي يحول كل ng-repeat s إلى تعليقات.

إذا لم أتمكن من عرض DOM بحثًا عن ng-repeat-start ، فأنا غير قادر على حساب عمق السمة ng-repeat-end للمطابقة. يبدو أن نهجك يحل المشكلة ...

هممم ... يبدو أن هناك شيئًا ما خطأ. المستندات مفقودة في الالتزام الخاص بك ، لذلك ربما لا أستخدم الصيغة الصحيحة.

ألق نظرة على هذا:
http://plnkr.co/edit/sVilxKaNrhNM4JrkuQ5r؟p=preview

توقعت أن يكون ناتج الحالة غير المتداخلة:

Term: elastic
     Static term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
     This definition should be repeated for every term: 'par' term

وللشبكة المتداخلة:

Term: elastic
     Static term
Subterm: superelastic
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'elastic' term
Subterm: subelastic
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'elastic' term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
Subterm: superpar
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'par' term
Subterm: subpar
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'par' term
     This definition should be repeated for every term: 'par' term

أنا في عداد المفقودين شيء؟

lrlopez المثال الذي وضعته لا يستخدم أحدث إصدار من الكود. أيضًا ، هناك مبلغ إضافي </dl> في السطر 23

شكرا على الرد السريع! أنت على حق ، كان هناك </dl> إضافيًا في السطر 23. لقد قمت أيضًا بتحديث المكتبة. ومع ذلك ، ما زلت لا أستطيع العمل على المثال المتداخل ...

حسنًا ، يبدو أن هذه مشكلة حقيقية في التوجيهات متعددة العناصر الموجودة في نفس المستوى في DOM. تحديث العلاقات العامة مع إصلاح لهذه المشكلة

الإصلاحات مثل ng-repart-inner أو ng-replic-next لا تحل سوى واحدة من المواقف التي لا حصر لها حيث ستقيدك سلوكيات الربط بعقد DOM الفعلية.

بدلاً من تصحيح كل توجيه على حدة ، يمكنك حل هذا لإطار العمل بأكمله عن طريق إضافة دعم للعقد الافتراضية التي لا يتم عرضها في الشجرة الفعلية.

تتشابه فكرة استخدام التعليقات ، لكنها تؤدي إلى رمز قبيح يصعب قراءته وما زلت بحاجة إلى طريقة لتسمية تلك العقدة وإغلاقها بطريقة ما. بدلاً من اختراع بناء جملة عقدة تعليق جديد ، استخدم بناء جملة HTML الحالي.

فكر في الأمر كمفهوم مشابه ، على سبيل المثال ، فصول SASS الصامتة:

<div id="myComplexList">
    <ng-virtual ng-repeat="...">
        <a></a>
        <b></b>
        <c></c>
    </ng-virtual>
</div>

Result:

<div id="myComplexList">
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    ...
</div>

+1 للفكرة العامة لكنني سأختار مجموعة مثل تكرار المجموعة.

<ng-repeat-group="b in ches">
// group markup to be repeated here
</ng-repeat-group>

تعجبني فكرة العقد الافتراضية ، لكني ضد أن تصبح حلاً عامًا للمشكلة هنا.

إذا كان ذلك ممكنًا ، أود الحد من إنشاء أي حاويات اصطناعية. في حين أن الحاوية قد لا تظهر في html للنتيجة الإجمالية ، فإنها ستبدأ في تشويش كود html الذي يحتاج إلى إدارة.

في كثير من الحالات ، سنحتاج إلى بعض الحاويات لاحتواء ما نريد تكراره. السابق:

<tr>
  <td ng-repeat-start>1</td>
  <td ng-repeat-end>2</td>
</tr>

(الحاوية هنا هي [tr] s)

باستخدام حل العقدة الافتراضية المقترح من شأنه أن يحول هذا إلى:

<tr>
  <ng-virtual ng-repeat="...">
     <td>1</td>
     <td>2</td>
  </ng-virtual>
</tr>

صنع حاوية زائدة عن الحاجة: حتى هذه الإضافة المكونة من سطرين تجعلني أشعر بعدم الارتياح عندما أفكر في ما سيكون عليه الحال إذا أصبحت الشفرة أطول.

هناك مشكلة أخرى وهي أنها ستبدأ في جعل محاولة فهم مستوى دوم الموجودة في الكود حاليًا مملة.
هذا جزء من الكود من @ es128

<table>
<thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

يؤدي استخدام العقد الافتراضية إلى تحويل هذا إلى:

<table>
<thead>...</thead>
    <ng-virtual ng-repeat="...">
        <tr">...</tr>
        <tr>...</tr>
        <tr>...</tr>
    </ng-virtual>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

تكرار أول 3 trs والنهائي tr على نفس المستوى ، ولكن إذا كنت سأقوم فقط بإلقاء نظرة سريعة على الكود ، فهناك احتمال أن أخطئ في فهمهما على أنهما مستويات مختلفة ، أو سأبدأ في العثور على نفسي حساب ممل (ربما بشكل غير صحيح) على مستوى عمل الكود ، خاصة إذا بدأت هذه الأشياء في التداخل.

إليك نسخة معينة من بناء الجملة أحبها (من النوع ب):

<ul>
  <li>some static prefix item</li>
  <li ng-repeat-block="(name, definition) in myList">{{ something }}</li>
  <li>{{ something else }}</li>
  <li ng-repeat-block-close>{{ something else }}</li>
  <li>some static postfix item</li>
</ul>

stanvass اقتراحك هو تباين لما نشرته IgorMinar على أنه بناء جملة X ، المشكلة الرئيسية هي أن دعم المتصفح ليس موجودًا

لقد أدركت للتو أن وجود كل من ng-repeat-start و ng-repeat-end أمر زائد في الحالة التي تريد فيها تكرار عنصر داخلي واحد فقط.

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

سيكون من الجيد أن يكون لدينا أيضًا ng-repeat-single لمنع ذلك. السابق.

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

@ daegon123 إذا كنت تريد تكرار عنصر واحد ، فقط افعل

<tr>
  <td ng-repeat="...">repeat this</td>
</tr>

لا حاجة لـ ng-repeat-start أو ng- repeat-end

lgalfaso شكرًا ، يبدو أنني كنت

أعتقد أن هذه المسألة ليست مجرد تكرار عنصر واحد. يتعلق الأمر أكثر بكيفية تكرار مجموعة من العناصر دون تكرار أصلها. على سبيل المثال <dt>..<dd>... - ولكن هناك العديد من الأمثلة الجيدة الأخرى هنا.

Syntax X هو الوحيد الذي يتم تعريفه جيدًا بمجرد بدء التكرارات المتداخلة. كيف تكتب ما يلي في Syntax AD:

<template>
  <dl>
    <ng repeat="book in myList">
      <dt ng-repeat="author in book.authors">{{author.name}}</dt>
      <dd>{{book.title}}</dd>
      <dd>{{book.description}}</dd>
    </ng>
  </dl>
</template>

إنه اقتراح أفضل.
مُرسَل من My Blackberry®

-----رسالة أصلية-----
من: daegon123 [email protected]
التاريخ: الاثنين ، 06 مايو 2013 22:57:16
إلى: angular / angular.jsangular. [email protected]
الرد على: "angular / angular.js" [email protected]
الموضوع: Re: [angular.js] ng كرر مع DL / DD / DT (# 1891)

لقد أدركت للتو أن وجود كل من ng-repeat-start و ng-repeat-end أمر زائد في الحالة التي تريد فيها تكرار عنصر داخلي واحد فقط.

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

سيكون من الجيد أن يكون لدينا أيضًا ng-repeat-single لمنع ذلك. السابق.

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub:
https://github.com/angular/angular.js/issues/1891#issuecomment -17524685

+1 ، هذا قيد كبير.

: +1: نتطلع إلى رؤية حل لهذا! سأقوم باستخدام <li> في الوقت الحالي ، لكني أرغب في إعادة بناء هذا الترميز عندما يخرج الزاوي بحل لهذا =)

هل سيحل # 2783 هذا؟

نعم فعلا. لدينا حل وصل للتو: e46100f7097d9a8f174bdb9e15d4c6098395c3f2

أنا أغلق هذه القضية.

لقد حدث خطأ: <TypeError: Object #<Text> has no method 'hasAttribute'> في هذا المثال البسيط:

<table>
        <tr ng-repeat-start="value in [1,2,3,4]">I get repeated</tr>
        <tr ng-repeat-end>I also get repeated</tr>
    </table>

أيضا الحصول على القضية كما يقول gevgeny.
ليس له طريقة 'hasAttribute'>

<tr>
                <td data-ng-repeat-start="column in selectedItem.Beds" class="text-center">Avail. Beds</td>
                <td data-ng-repeat-end>Extra Bed Spaces</td>
</tr>

@ kharnt0x انظر هذا الطلب puul https://github.com/angular/angular.js/pull/2859

كيف يحل # 2783 هذا:

{[{h: "1",
   o: [{h: "1.1",
        o: [{h: "1.1.1"},
            {h: "1.1.2"},
            {h: "1.1.3"}]},
       {h: "1.2",
        o: [{h: "1.2.1"},
            {h: "1.2.2"},
            {h: "1.2.3"}]},

....

تحتاج إلى إخراج شيء مثل هذا:

<h1>1</h1>
<h2>1.1</h2>
<h3>1.1.1</h3>
<h3>1.1.2</h3>
<h3>1.1.3</h3>
<h2>1.2</h2>
<h3>1.2.1</h3>
<h3>1.2.2</h3>
<h3>1.2.3</h3> 

ماذا سيكون بناء الجملة؟

ChrisCinelli حاول استخدام hgroup

<h1>1</h1>
<hgroup>
    <h2>1.1</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
    <h2>1.2</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
<hgroup>

لذا يبدو أن hgroup قد تمت إزالته من HTML5 (http://html5doctor.com/the-hgroup-element/) ، إلى جانب ذلك ، حيث كنت أقول إن المشكلة أكثر تعقيدًا وتم استخدام علامات الرأس على سبيل المثال فقط.
من الواضح أن هذه حالة استخدام يجب السماح بها ولا تكسر على الإطلاق فلسفة الرؤية التصريحية لـ Angular ...

بالنسبة للمخرجات المحددة التي تبحث عنها ، هل فكرت في CSS
عدادات؟

ارى:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
http://css-tricks.com/almanac/properties/c/counter-increment/

يوم الثلاثاء ، 18 حزيران (يونيو) 2013 ، الساعة 2:46 مساءً ، كتب كريس سينيلي [email protected] :

لذلك يبدو أن hgroup قد تمت إزالته من HTML5 (
http://html5doctor.com/the-hgroup-element/) ، بجانب ذلك ، كما كنت
القول بأن المشكلة أكثر تعقيدًا وأنه تم استخدام علامات الرأس فقط من أجل
مثال.
من الواضح أن هذه حالة استخدام يجب السماح بها ولا تنقطع عندها
كل فلسفة العرض التقريري للزاوية ...

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/1891#issuecomment -19644594
.

لقد استخدمت العنوان كمثال لتوضيح ذلك ... في الواقع لدي <div> معقد نسبيًا مع بنية مختلفة لكل مستوى من مستويات بنية البيانات.

الحل الوحيد الذي وجدته حتى الآن هو جعل بنية البيانات في Javascript خطية واستخدام مفتاح ng لمستويات مختلفة وسيتطلب مني مستوى div إضافيًا.
يحتوي هذا الحل على مقدار حمل (مثل الذاكرة ووحدة المعالجة المركزية لتخطيط بنية البيانات) وسيبدو HTML أقل وضوحًا بكثير من قالب الشرطة السفلية الذي يمكنني استخدامه بدلاً من ذلك ...

هل يمكنك عمل توجيهات لكل مستوى؟ لست متأكدا من أي نوع
الهيكل الذي تتحدث عنه هنا ، لذا سأكون مجرد أمسك بالقش.
ولكن من واقع خبرتي ، فإن ng-switch نادرًا ما يكون ضروريًا عندما يكون لديك
الوصول إلى التوجيهات و ng-include ، ويؤدي إلى قوالب spaghetti-code.

يوم الثلاثاء ، 18 يونيو 2013 ، الساعة 4:27 مساءً ، كتب كريس سينيلي إخطارات github.com:

لقد استخدمت العنوان كمثال لأوضح ... في الواقع لدي
div معقد نسبيًا بهيكل مختلف لكل مستوى في
هيكل البيانات.

الحل الوحيد الذي وجدته حتى الآن هو جعل الشجرة خطية
جافا سكريبت واستخدام ng-switch لمستويات مختلفة.
هذا الحل له عبء (أي الذاكرة ووحدة المعالجة المركزية لخطي البيانات
بنية) وسيبدو HTML أقل وضوحًا بكثير من ملف
قالب تسطير أسفل السطر يمكن استخدامه بدلاً من ذلك ...

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/1891#issuecomment -19650391
.

هكذا تبدو: http://d.pr/i/GSX4
الملصقات القصيرة جدًا (1.xx x) والأوصاف وعدد علامات الاختيار وما إلى ذلك ، تأتي من db.
أنا أستكشف خيار تحويل هذا الجزء إلى Angular ولكن لا توجد نردات حتى الآن.

إن وجهة النظر الحالية تفتقر إلى المنطق وتوضح نسبيًا ما يجري.
إذا فهمت جيدًا ، فأنت تقترح إلى حد كبير أن تضطر إلى كسر كل مستوى في قطعة جافا سكريبت.

يبدو هذا بالنسبة لي أكثر فوضوية وأقل تهاونًا وأقل قابلية للقراءة. بالنظر إلى بنية البيانات التي تحتوي على جميع المعلومات لعرض هذه اللوحة ، لماذا أحتاج إلى استخدام رمز في ملف مختلف (الوحدة النمطية / وحدة التحكم) عندما يكون المنطق مرتبطًا بشكل كامل ومحدّد جدًا لهذا العرض؟ IMHO ، يجب أن تكون وحدة التحكم (وهي الآن قيد التنفيذ الحالي):

• الحصول على البيانات من النموذج
• قم بتمرير النموذج إلى العرض حتى يتمكن إطار العمل من عرضه

بالتأكيد يمكنني إضافة عدد قليل من divs الإضافية وتغيير CSS ، ولكن إذا كان هذا ضروريًا لجعله يعمل مع Angular ، فإنه يشعر أن Angular يعيق الطريقة التي تجعله مناسبًا وأنيقًا لإنجاز الأشياء هنا.

لقد وجدت ربط البيانات في KnockoutJS ، والذي يسمح لكل من الارتباطين بعنصر html <div data-bind="foreach: ..."> بالإضافة إلى "بناء جملة التحكم في التدفق بدون حاويات" ، <!-- ko foreach: ... --><!-- /ko --> ، ليكون مفيدًا بشكل غير عادي ، وأعتقد أنه سيكون رائعًا لو يمكن أن يدعم Angular مجموعة مماثلة من خيارات بناء الجملة ، تمامًا مثل بناء الجملة المقترح bowsersiary .

لمزيد من التفاصيل حول خيار "بدون حاويات" في Knockout:
http://knockoutjs.com/documentation/foreach-binding.html

+1 لبناء الجملة الظاهري
يعمل KnockoutJS على تسهيل التعامل مع المجموعات dd والمتداخلة.
على سبيل المثال http://stackoverflow.com/questions/20062032/nested-table-using-ng-repeat