passage de valeurs d'index de 2 $ dans ng-repeat imbriqué

J'ai donc un ng-repeat imbriqué dans un autre ng-repeat afin de construire un menu nav. Sur chacun <li>de la boucle interne ng-repeat, j'ai défini un ng-click qui appelle le contrôleur approprié pour cet élément de menu en passant l'index $ pour faire savoir à l'application dont nous avons besoin. Cependant, je dois également passer l'index $ à partir de la répétition externe ng afin que l'application sache dans quelle section nous nous trouvons ainsi que quel tutoriel.

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

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

Chaque ng-repeat crée une portée enfant avec les données transmises et ajoute également une $indexvariable supplémentaire dans cette portée.

Donc, ce que vous devez faire, c'est atteindre la portée parent et l'utiliser $index.

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

Solution beaucoup plus élégante que celle $parent.$indexutilisée 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'en est-il de l'utilisation de cette syntaxe (jetez un oeil dans ce plunker ). Je viens de découvrir cela et c'est assez génial.

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

Exemple:

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

Avec cette syntaxe, vous pouvez donner votre propre nom $indexet différencier les deux index.

Juste pour aider quelqu'un qui arrive ici ... Vous ne devriez pas utiliser $ parent. $ Index car ce n'est pas vraiment sûr. Si vous ajoutez un ng-if à l'intérieur de la boucle, vous obtenez le $ index foiré!

La bonne façon

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

Vérifier: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Lorsque vous traitez avec des objets, vous voulez ignorer les identifiants simples autant que possible.

Si vous changez la ligne de clic en ceci, je pense que vous serez sur la bonne voie:

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

De plus, je pense que vous devrez peut-être changer

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

à quelque chose comme

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

Voir http://docs.angularjs.org/misc/faq et recherchez ng-class.

Utilisez simplement ng-repeat="(sectionIndex, section) in sections"

et cela sera utilisable au niveau suivant 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>