Dostęp do indeksu macierzystego powtórzenia z potomnego powtórzenia

218

Chcę użyć indeksu listy nadrzędnej (foos) jako argumentu wywołania funkcji na liście podrzędnej (foos.bars).

Znalazłem post, w którym ktoś zaleca użycie $ parent. $ Index, ale $indexnie jest własnością $parent.

Jak mogę uzyskać dostęp do indeksu rodzica 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>
Koder 1
źródło
2
Wydaje mi się, że działa poprawnie. Napisałem plunker, aby pokazać, że działa: plnkr.co/edit/BenCDh4NUGPPHKWGsGMr?p=preview Czy możesz podać więcej szczegółów?
Piran
Dziękuję za to. Doprowadziło mnie to do wniosku, że mój problem był błędem w znacznikach.
Koder1
@ Coder1, rozważ usunięcie tego pytania.
Mark Rajcok
7
@MarkRajcok Rozważyłem to zeszłej nocy, ale pomyślałem, że byłoby to pomocne dla innych szukających tego, jak to zrobić, więc zostawiłem to.
Koder1
2
Cóż, jeśli chcesz je zachować, dodaj odpowiedź i zaakceptuj ją (aby to pytanie nie pozostało na liście „bez odpowiedzi”).
Mark Rajcok

Odpowiedzi:

279

Mój przykładowy kod był poprawny, a problemem był inny kod. Wiem jednak, że trudno było znaleźć przykłady tego, więc odpowiadam na wypadek, gdyby ktoś inny szukał.

<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>
Koder 1
źródło
13
Poza tym rzuciło mnie to na chwilę. Jeśli w kodzie jest dyrektywa data-ng-switch, musisz przejść o dodatkowy poziom zakresu - ($ parent. $ Parent. $ Index). Wiem, że nie jest ładna.
Hairgami_Master
Zgoda. Musiałem przekazać $ parent. $ Parent. $ Index do mojej funkcji kontrolera, aby uzyskać poprawną wartość, ale następnie powiązać mój program-show z $ parent. $ Index. Wydaje mi się, że jest to błąd kątowy
Andrew Gray,
Mogę zrobić coś takiego, jeśli mam jedno powtórzenie kolekcję wraz z NG-repeat Podobno wraca niezdefiniowany robi to samo?
Ali Sadiq
6
Żeby dodać - potrzebujesz dodatkowego $ rodzica, nawet jeśli masz ng-ifkod, jak właśnie się dowiedziałem.
Plasty Grove
@PlastyGrove Dziękujemy za zwrócenie uwagi na to, że ng-ifwymaga dodatkowych $parentinformacji. Uratowało mnie trochę bólu głowy.
iiminov,
219

Zgodnie z dokumentami ng-repeat http://docs.angularjs.org/api/ng.directive:ng Powtórz , możesz przechowywać indeks klucza lub tablicy w wybranej zmiennej.(indexVar, valueVar) in values

więc możesz pisać

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

Jeden poziom wyżej jest wciąż całkiem czysty z $ parent. $ Index, ale kilku rodziców w górę, sprawy mogą się popsuć.

Uwaga: $indexbędzie nadal definiowany w każdym zakresie, nie jest zastępowany przez fIndex.

Samuli Ulmanen
źródło
Nie rozumiem notatki. Czy nie jest to sedno tego pytania, ponieważ to nieprawda?
adam-beck
16
Powinno to być potwierdzone odpowiedź jak to jest czystsze niż $parent.$indexjednym
tdebroc
1
@ adam-beck Myślę, że mają na myśli, że przy użyciu tej (fIndex, f)metody $ index będzie nadal zdefiniowany (nie pominięty) - więc indeks staje się dostępny zarówno jako, jak $indexi fIndex.
Samuel Jaeschke,
1
W moim przypadku używanie $indexnie działa, ale dodawanie fIndexdziała. Nie mam pojęcia, dlaczego $index nie działa (działa w innych miejscach mojego kodu), ale po kilku dniach zmagania przestałem się przejmować, gdy znalazłem tę odpowiedź. Jest również nieco bardziej czytelny, gdy masz wiele ng-repeatIMO.
Krøllebølle
@ Krøllebølle powodem, dla którego działa tak, jak go widzisz, jest to, że każda ng-repeatiteracja tworzy własny zakres, który również definiuje własny zakres $index, zastępując zakres rodzica $index. Jeśli umieścisz {{$index}}prawo powyżej lub poniżej najbardziej wewnętrznego ng-repeatelementu, zobaczysz wartość rodzica, a umieszczenie go wewnątrz najbardziej wewnętrznego ng-repeatelementu pokaże ci dziecko. Użycie podejścia z tej odpowiedzi po prostu przypisuje indeks nadrzędny do zmiennej, której nazwę wybrałeś ( fIndex), aby nie została nadpisana przez zakres potomny.
tavnab
44

Spójrz na moją odpowiedź na podobne pytanie .
Przez aliasing $indexnie musimy pisać takich szalonych rzeczy $parent.$parent.$index.


O wiele bardziej eleganckie rozwiązanie niż $parent.$indexużywanie 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
źródło
3
także jest bezpieczniejszy! jeśli dodasz ng-if wewnątrz pętli, otrzymasz pomieszany indeks $, sprawdź: plnkr.co/52oIhLfeXXI9ZAynTuAJ
gonzalon
Musiałem zrobić sectionIndex = $ Parent. $ Index
Beanwah
Zmienna nie zostanie zaktualizowana, jeśli usuniesz element, który był w tablicy powtarzania. Indeks $ i $ rodzic. Indeks $ jest zawsze bezpiecznym wyborem
Bharath Bhandarkar
12

Możesz także przejąć kontrolę nad indeksem dziadka, stosując następujący kod

$parent.$parent.$index
AkRoy
źródło
1
Działa to dobrze w moim projekcie. Dziękujemy za dostarczenie niesamowitego rozwiązania!
Canet Robern
Najwyraźniej nie jest to rozszerzalne.
Ganesh Vellanki
Niestety jest to w pewnym sensie przykład zazdrości cechom i oczywiście problematycznych wielu przypadków.
ChiefTwoPencils
2

Możesz po prostu użyć use $ parent. $ Index .where rodzic będzie reprezentował obiekt rodzica powtarzającego się obiektu.

Vivek Panday
źródło
0

$ Parent nie działa, jeśli jest wielu rodziców. zamiast tego możemy zdefiniować nadrzędną zmienną indeksową w init i użyć jej

<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
źródło
patrz odpowiedź vucalur tutaj również o tym wspomina. Zasadniczo jest to właściwa droga do przejścia na IMO i ogólnie właściwe użycie tylko dla ng-init. Za każdym razem, gdy ludzie docierają do $ rodzica, prosisz o kłopoty, gdy zmienia się kontekst twojego kodu.
shaunhusain