passando 2 $ valori indice all'interno di ng-repeat nidificato

Quindi ho un ng-repeat nidificato all'interno di un altro ng-repeat per creare un menu di navigazione. Su ognuno <li>del ciclo interno di ng-repeat ho impostato un ng-click che chiama il controller pertinente per quella voce di menu passando l'indice $ per far sapere all'app che ci serve. Tuttavia, devo anche passare l'indice $ dall'esterno ng-repeat in modo che l'app sappia in quale sezione ci troviamo e in quale 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>

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

Ogni ng-repeat crea un ambito figlio con i dati passati e aggiunge anche una $indexvariabile aggiuntiva in quell'ambito.

Quindi quello che devi fare è raggiungere l'ambito genitore e usarlo $index.

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

Soluzione molto più elegante di quella che $parent.$indexsta usando 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

Che ne dici di usare questa sintassi (dai un'occhiata a questo plunker ). L'ho appena scoperto ed è davvero fantastico.

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

Esempio:

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

Con questa sintassi è possibile assegnare il proprio nome $indexe differenziare i due indici.

Solo per aiutare qualcuno che arriva qui ... Non dovresti usare $ parent. $ Index in quanto non è davvero sicuro. Se aggiungi un ng-if all'interno del ciclo, ottieni l'indice $ incasinato!

Giusta direzione

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

Controllare: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Quando hai a che fare con oggetti, vuoi ignorare gli ID semplici tanto comodi.

Se cambi la linea di clic in questo, penso che sarai sulla buona strada:

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

Inoltre, penso che potresti dover cambiare

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

a qualcosa del genere

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

Vedi http://docs.angularjs.org/misc/faq e cerca ng-class.

Basta usare ng-repeat="(sectionIndex, section) in sections"

e che sarà utilizzabile al livello successivo 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>