przekazanie 2 $ wartości indeksu w zagnieżdżonym powtórzeniu ng

Więc mam powtórzenie ng zagnieżdżone w innym powtórzeniu ng, aby zbudować menu nawigacyjne. Na każdym <li>w wewnętrznej pętli powtórzenia ng ustawiam kliknięcie ng, które wywołuje odpowiedni kontroler dla tego elementu menu, przekazując indeks $, aby poinformować aplikację, której potrzebujemy. Jednak muszę również przekazać indeks $ z zewnętrznego ng-repeat, aby aplikacja wiedziała, w której sekcji się znajdujemy, a także w jakim tutorialu.

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

oto Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Każde powtórzenie ng tworzy zakres potomny z przekazanymi danymi, a także dodaje dodatkową $indexzmienną w tym zakresie.

Musisz więc dotrzeć do zakresu nadrzędnego i użyć go $index.

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

O wiele bardziej eleganckie rozwiązanie niż $parent.$indexużycie 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

Co powiesz na użycie tej składni (spójrz na ten fragmentator ). Właśnie to odkryłem i jest to całkiem niesamowite.

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

Przykład:

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

Dzięki tej składni możesz nadać własne imię $indexi rozróżnić dwa indeksy.

Aby pomóc komuś, kto się tu dostanie ... Nie powinieneś używać $ parent. $ Index, ponieważ nie jest to naprawdę bezpieczne. Jeśli dodasz ng-if wewnątrz pętli, dostaniesz błąd indeksu $!

Właściwy sposób

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

Sprawdź: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Kiedy masz do czynienia z obiektami, chcesz zignorować proste identyfikatory tak samo, jak wygodne.

Jeśli zmienisz linię kliknięcia na to, myślę, że będziesz na dobrej drodze:

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

Myślę też, że możesz potrzebować zmiany

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

do czegoś takiego

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

Zobacz http://docs.angularjs.org/misc/faq i poszukaj klasy ng.

Po prostu użyj ng-repeat="(sectionIndex, section) in sections"

i będzie to możliwe do użycia na następnym poziomie powtórzenia ng w dół.

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