wake-up-neo.com

Übergabe von 2 $ Indexwerten innerhalb von ng-repeat

Ich habe also eine ng-Wiederholung in eine andere ng-Wiederholung verschachtelt, um ein Navigationsmenü zu erstellen. Bei jedem <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. Allerdings muss ich auch den $ -Index aus dem äußeren ng-repeat ü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

315
Tules

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

Sie müssen also den übergeordneten Bereich erreichen und diesen $index verwenden.

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>
460
Alex Osborn

Eine viel elegantere Lösung als _$parent.$index_ verwendet 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

199
vucalur

Was ist mit dieser Syntax (werfen Sie einen Blick in diese Plunker ). Ich habe das gerade entdeckt und es ist ziemlich genial.

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 $index einen eigenen Namen geben und die beiden Indizes unterscheiden.

108
Okazari

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

31
gonzalon

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 ä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 suche nach ng-class.

3
kwerle

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

und das wird auf der nächsten Ebene nutzbar sein.

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