pasar 2 valores de índice $ dentro de ng-repeat anidado

Entonces tengo un ng-repeat anidado dentro de otro ng-repeat para construir un menú de navegación. En cada uno <li>del bucle interno ng-repeat, configuro un ng-click que llama al controlador correspondiente para ese elemento del menú pasando el $ index para que la aplicación sepa cuál necesitamos. Sin embargo, también necesito pasar el $ index desde el ng-repeat externo para que la aplicación sepa en qué sección estamos y en qué 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>

aquí hay un Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Cada ng-repeat crea un ámbito secundario con los datos pasados, y también agrega una $indexvariable adicional en ese ámbito.

Entonces, lo que debe hacer es llegar al alcance principal y utilizarlo $index.

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

Solución mucho más elegante 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

¿Qué pasa con el uso de esta sintaxis (eche un vistazo en este plunker ). Acabo de descubrir esto y es bastante impresionante.

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

Ejemplo:

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

Con esta sintaxis puede dar su propio nombre $indexy diferenciar los dos índices.

Solo para ayudar a alguien que llegue aquí ... No debes usar $ parent. $ Index ya que no es realmente seguro. Si agrega un ng-if dentro del bucle, ¡obtendrá el $ index desordenado!

Manera correcta

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

Verifique: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Cuando se trata de objetos, desea ignorar las identificaciones simples tanto como sea conveniente.

Si cambia la línea de clic a esto, creo que estará bien encaminado:

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

Además, creo que es posible que deba cambiar

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

a algo como

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

Consulte http://docs.angularjs.org/misc/faq y busque ng-class.

Solo usa ng-repeat="(sectionIndex, section) in sections"

y eso será utilizable en el siguiente nivel 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>