Übergeben von 2 $ Indexwerten innerhalb der verschachtelten ng-Wiederholung

Ich habe also eine ng-Wiederholung in einer anderen ng-Wiederholung verschachtelt, um ein Navigationsmenü zu erstellen. Auf jeder <li>in der inneren ng-repeat-Schleife setze ich einen ng-Klick, der den entsprechenden Controller für diesen Menüpunkt aufruft, indem ich den $ -Index übergebe, um der App mitzuteilen, welchen wir benötigen. Ich muss jedoch auch den $ -Index aus der äußeren ng-Wiederholung übergeben, damit die App weiß, in welchem ​​Abschnitt wir uns befinden und in welchem ​​Tutorial.

<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>

Hier ist ein Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Jede ng-Wiederholung erstellt einen untergeordneten Bereich mit den übergebenen Daten und fügt diesem Bereich eine zusätzliche $indexVariable hinzu .

Was Sie also tun müssen, ist, den übergeordneten Bereich zu erreichen und diesen zu verwenden $index.

Siehe 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>

Viel elegantere Lösung als $parent.$indexverwendet 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>

Plunker: http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info

Was ist mit dieser Syntax (werfen Sie einen Blick in diesen Plunker ). Ich habe das gerade entdeckt und es ist ziemlich großartig.

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

Beispiel:

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

Mit dieser Syntax können Sie $indexden beiden Indizes Ihren eigenen Namen geben und sie unterscheiden.

Nur um jemandem zu helfen, der hierher kommt ... Sie sollten nicht $ parent. $ Index verwenden, da dies nicht wirklich sicher ist. Wenn Sie ein ng-if in die Schleife einfügen, wird der $ index durcheinander gebracht!

Richtiger Weg

  <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>

Überprüfen Sie: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Wenn Sie mit Objekten arbeiten, möchten Sie einfache IDs so weit wie möglich ignorieren.

Wenn Sie die Klicklinie in diese ändern, sind Sie auf einem guten Weg:

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

Ich denke auch, dass Sie sich möglicherweise ändern müssen

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

zu so etwas wie

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

Siehe http://docs.angularjs.org/misc/faq und suchen Sie nach ng-class.

Benutz einfach ng-repeat="(sectionIndex, section) in sections"

und das wird auf der nächsten Ebene verwendbar sein 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>