Zugriffsindex der übergeordneten ng-Wiederholung von der untergeordneten ng-Wiederholung

218

Ich möchte den Index der übergeordneten Liste (foos) als Argument für einen Funktionsaufruf in der untergeordneten Liste (foos.bars) verwenden.

Ich habe einen Beitrag gefunden, in dem jemand die Verwendung von $ parent. $ Index empfiehlt, der jedoch $indexnicht Eigentum von ist $parent.

Wie kann ich auf den Index des Elternteils zugreifen ng-repeat?

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

javascript angularjs angularjs-ng-repeat

— Coder1
quelle

2

Es scheint für mich richtig zu funktionieren. Ich habe einen Plunker geschrieben, um zu zeigen, dass er funktioniert: plnkr.co/edit/BenCDh4NUGPPHKWGsGMr?p=preview Können Sie weitere Details bereitstellen?

— Piran

Danke für das. Ich stellte fest, dass mein Problem ein Fehler in meinem Markup war.

— Coder1

@ Coder1, bitte erwägen Sie, diese Frage zu löschen.

— Mark Rajcok

7

@ MarkRajcok Ich habe es letzte Nacht in Betracht gezogen, dachte aber, es wäre hilfreich für andere, die nach Möglichkeiten suchen, also habe ich es verlassen.

— Coder1

2

Wenn Sie es behalten möchten, fügen Sie bitte eine Antwort hinzu und akzeptieren Sie sie (damit diese Frage nicht auf der "unbeantworteten" Liste bleibt).

— Mark Rajcok

279

Mein Beispielcode war korrekt und das Problem war etwas anderes in meinem tatsächlichen Code. Trotzdem weiß ich, dass es schwierig war, Beispiele dafür zu finden, also beantworte ich es, falls jemand anderes sucht.

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

— Coder1
quelle

13

Auch das warf mich für eine Weile. Wenn Ihr Code eine data-ng-switch-Direktive enthält, müssen Sie eine zusätzliche Bereichsebene ($ parent. $ Parent. $ Index) erhöhen. Nicht schön, ich weiß.

— Hairgami_Master

Einverstanden. Ich musste $ parent. $ Parent. $ Index an meine Controller-Funktion übergeben, um den korrekten Wert zu erhalten, aber dann meine ng-show an $ parent. $ Index binden. Scheint mir ein eckiger Käfer zu sein

— Andrew Gray

Kann ich so etwas tun, wenn ich eine Sammlungswiederholung zusammen mit ng-repeat habe? Anscheinend kehrt sie undefiniert zurück und tut dasselbe

— Ali Sadiq

6

Nur zum Hinzufügen - Sie benötigen ein zusätzliches $ Elternelement, auch wenn Sie ein ng-ifim Code haben, wie ich gerade herausgefunden habe.

— Plasty Grove

@PlastyGrove Vielen Dank für den Hinweis, dass ng-ifeine zusätzliche $parentReferenz erforderlich ist . Hat mir Kopfschmerzen erspart.

— Iiminov

219

Gemäß den ng-repeat-Dokumenten http://docs.angularjs.org/api/ng.directive:ngRepeat können Sie den Schlüssel- oder Array-Index in der Variablen Ihrer Wahl speichern.(indexVar, valueVar) in values

so kannst du schreiben

<div ng-repeat="(fIndex, f) in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething(fIndex)">Add Something</a>
    </div>
  </div>
</div>

Eine Stufe höher ist mit $ parent. $ Index immer noch ziemlich sauber, aber bei mehreren Eltern kann es chaotisch werden.

Hinweis: $indexWird weiterhin in jedem Bereich definiert und nicht durch ersetzt fIndex.

— Samuli Ulmanen
quelle

Ich verstehe die Notiz nicht. Ist das nicht der springende Punkt dieser Frage, weil das nicht stimmt?

— Adam-Beck

16

Dies sollte die validierte Antwort sein , wie es ist sauberer als der $parent.$indexein

— tdebroc

1

@ adam-Beck Ich denke , sie bedeuten , dass , wenn diese unter Verwendung von (fIndex, f)Verfahren, wird immer noch $ Index (nicht weggelassen) definiert werden - so der Index als beide zugänglich wird $indexund fIndex.

— Samuel Jaeschke

1

In meinem Fall $indexfunktioniert die Verwendung nicht, das Hinzufügen der Funktionen fIndexjedoch. Ich habe keine einzige Ahnung, warum $index es nicht funktioniert (es funktioniert an anderen Stellen in meinem Code), aber nachdem ich einige Tage lang gekämpft hatte, hörte ich auf, mich zu kümmern, als ich diese Antwort fand. Es ist auch etwas besser lesbar, wenn Sie mehrere ng-repeatIMO haben.

— Krøllebølle

@ Krøllebølle Der Grund, warum es so funktioniert, wie Sie es sehen, ist, dass jede ng-repeatIteration ihren eigenen Bereich erstellt, der auch ihren eigenen definiert $indexund den des Elternteils überschreibt $index. Wenn Sie ein {{$index}}Recht über oder unter dem innersten ng-repeatElement einfügen, wird der Wert des Elternteils angezeigt. Wenn Sie ihn in das innerste ng-repeatElement einfügen, wird der Wert des Kindes angezeigt. Wenn Sie den Ansatz in dieser Antwort verwenden, wird der übergeordnete Index nur einer Variablen zugewiesen, deren Namen Sie ausgewählt haben ( fIndex), damit er nicht von einem untergeordneten Bereich überschrieben wird.

— Tavnab

44

Schauen Sie sich meine Antwort auf eine ähnliche Frage an .
Durch Aliasing müssen $indexwir keine verrückten Sachen wie schreiben $parent.$parent.$index.

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

— Vucalur
quelle

3

es ist auch sicherer! Wenn Sie ein ng-if in die Schleife einfügen

— gonzalon

Ich musste sectionIndex = $ parent. $ Index

— Beanwah

Die Variable wird nicht aktualisiert, wenn Sie ein Element löschen, das sich im Wiederholungsarray befand. $ index und $ parent. $ index ist immer die sichere Wahl

— Bharath Bhandarkar

12

Sie können die Kontrolle über den Grand Parent-Index auch über den folgenden Code erhalten

$parent.$parent.$index

— AkRoy
quelle

1

Das funktioniert gut für mein Projekt. Vielen Dank für die Bereitstellung einer großartigen Lösung!

— Canet Robern

Dies ist anscheinend nicht erweiterbar.

— Ganesh Vellanki

Leider ist dies ein Beispiel für Feature-Neid und offensichtlich in vielen Fällen problematisch.

— ChiefTwoPencils

2

Sie können einfach use $ parent. $ Index verwenden, wobei parent das Objekt des übergeordneten sich wiederholenden Objekts darstellt.

— Vivek Panday
quelle

0

$ parent funktioniert nicht, wenn mehrere Eltern vorhanden sind. Stattdessen können wir in init eine übergeordnete Indexvariable definieren und verwenden

<div data-ng-init="parentIndex = $index" ng-repeat="f in foos">
  <div>
    <div data-ng-init="childIndex = $index" ng-repeat="b in foos.bars">
      <a ng-click="addSomething(parentIndex)">Add Something</a>
    </div>
  </div>
</div>

— Gajanan Prasad
quelle

siehe Antwort von vucalur hier erwähnt es auch dies. Im Allgemeinen ist dies der richtige Weg zu IMO und im Allgemeinen nur die richtige Verwendung für ng-init. Jedes Mal, wenn Leute bis zu $ parent erreichen, fragen Sie nach Problemen, wenn sich der Kontext Ihres Codes ändert.

— Shaunhusain