passando 2 $ valores de índice dentro de ng-repeat aninhada

Então, eu tenho um ng-repeat aninhado dentro de outro ng-repeat para criar um menu de navegação. Em cada um <li>no loop ng-repeat interno, defino um ng-click que chama o controlador relevante para esse item de menu, passando o índice $ para que o aplicativo saiba qual deles precisamos. No entanto, eu também preciso passar o índice $ do ng-repeat externo para que o aplicativo saiba em qual seção estamos e qual 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>

aqui está um Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Cada ng-repeat cria um escopo filho com os dados passados ​​e também adiciona uma $indexvariável adicional nesse escopo.

Portanto, o que você precisa fazer é alcançar o escopo pai e usá-lo $index.

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

Solução muito mais elegante do que $parent.$indexestá 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

Que tal usar esta sintaxe (veja este plunker ). Acabei de descobrir isso e é incrível.

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

Exemplo:

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

Com esta sintaxe, você pode dar seu próprio nome $indexe diferenciar os dois índices.

Só para ajudar alguém que chega aqui ... Você não deve usar $ parent. $ Index, pois não é realmente seguro. Se você adicionar um ng-if dentro do loop, você terá o $ index bagunçado!

Caminho certo

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

Confira: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Ao lidar com objetos, você deseja ignorar os IDs simples, tanto quanto for conveniente.

Se você alterar a linha do clique para isso, acho que você estará bem no seu caminho:

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

Além disso, acho que você pode precisar mudar

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

para algo como

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

Veja http://docs.angularjs.org/misc/faq e procure por ng-class.

Apenas use ng-repeat="(sectionIndex, section) in sections"

e isso será útil no próximo nível 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>