ผ่าน 2 $ index index ภายใน ng-repeat ที่ซ้อนกัน

ดังนั้นฉันจึงมี ng-repeat ซ้อนกันภายใน ng-repeat อื่นเพื่อสร้างเมนู nav ในแต่ละ<li>วงวนซ้ำภายในฉันตั้งค่า ng-click ซึ่งเรียกตัวควบคุมที่เกี่ยวข้องสำหรับรายการเมนูนั้นโดยการผ่านดัชนี $ เพื่อให้แอปทราบว่าเราต้องการอะไร อย่างไรก็ตามฉันจำเป็นต้องผ่านในดัชนี $ จากนอก ng-repeat เพื่อให้แอปรู้ว่าเราอยู่ในส่วนใดรวมถึงบทแนะนำที่สอนด้วย

<ul ng-repeat="section in sections">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($index)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

นี่คือ Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

แต่ละ ng-repeat สร้างขอบเขตลูกด้วยข้อมูลที่ส่งผ่านและยังเพิ่ม$indexตัวแปรเพิ่มเติมในขอบเขตนั้น

ดังนั้นสิ่งที่คุณต้องทำคือเอื้อมมือถึงขอบเขตของผู้ปกครองและใช้$indexมัน

ดูhttp://plnkr.co/edit/FvVhirpoOF8TYnIVygE6?p=preview

<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">
    {{tutorial.name}}
</li>

วิธีแก้ปัญหาที่หรูหรากว่าที่$parent.$indexใช้ng-init:

<ul ng-repeat="section in sections" ng-init="sectionIndex = $index">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

ปังเกอร์: http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info

สิ่งที่เกี่ยวกับการใช้ไวยากรณ์นี้ (ดูที่พลันเกอร์นี้) ฉันเพิ่งค้นพบสิ่งนี้และมันก็สวยมาก

ng-repeat="(key,value) in data"

ตัวอย่าง:

<div ng-repeat="(indexX,object) in data">
    <div ng-repeat="(indexY,value) in object">
       {{indexX}} - {{indexY}} - {{value}}
    </div>
</div>

ด้วยไวยากรณ์นี้คุณสามารถให้ชื่อของคุณเอง$indexและสร้างความแตกต่างของดัชนีทั้งสอง

เพียงเพื่อช่วยคนที่มาที่นี่ ... คุณไม่ควรใช้ $ parent $ $ เพราะมันไม่ปลอดภัยจริงๆ หากคุณเพิ่ม ng-if ในลูปคุณจะได้รับ $ index messed!

วิธีการที่เหมาะสม

  <table>
    <tr ng-repeat="row in rows track by $index" ng-init="rowIndex = $index">
        <td ng-repeat="column in columns track by $index" ng-init="columnIndex = $index">

          <b ng-if="rowIndex == columnIndex">[{{rowIndex}} - {{columnIndex}}]</b>
          <small ng-if="rowIndex != columnIndex">[{{rowIndex}} - {{columnIndex}}]</small>

        </td>
    </tr>
  </table>

ตรวจสอบ: plnkr.co/52oIhLfeXXI9ZAynTuAJ

เมื่อคุณจัดการกับวัตถุคุณต้องการเพิกเฉยต่อ id ง่าย ๆ

หากคุณเปลี่ยนสายคลิกเป็นสิ่งนี้ฉันคิดว่าคุณจะไปได้ดี:

<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(tutorial)" ng-repeat="tutorial in section.tutorials">

นอกจากนี้ฉันคิดว่าคุณอาจต้องเปลี่ยน

class="tutorial_title {{tutorial.active}}"

เพื่อสิ่งที่ชอบ

ng-class="tutorial_title {{tutorial.active}}"

ดูhttp://docs.angularjs.org/misc/faqและค้นหา ng-class

เพียงแค่ใช้ ng-repeat="(sectionIndex, section) in sections"

และนั่นจะสามารถใช้งานได้ในระดับถัดไป ng-repeat down

<ul ng-repeat="(sectionIndex, section) in sections">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}, Your section index is {{sectionIndex}}
        </li>
    </ul>
</ul>