Accès à l'index du ng-repeat parent à partir du ng-repeat enfant

Question

Je souhaite utiliser l'index de la liste parentale (foos) comme argument d'un appel de fonction dans la liste enfant (foos.bars).

J'ai trouvé un post où quelqu'un recommande d'utiliser $parent.$index, mais $index n'est pas une propriété de $parent .

Comment puis-je accéder à l'index du parent ng-repeat ?

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

Answer 1

Mon code d'exemple était correct et le problème venait d'un autre élément de mon code réel. Néanmoins, je sais qu'il était difficile de trouver des exemples de ce type et je réponds donc à cette question au cas où quelqu'un d'autre chercherait.

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

Answer 2

D'après la documentation ng-repeat http://docs.angularjs.org/api/ng.directive:ngRepeat vous pouvez stocker la clé ou l'index du tableau dans la variable de votre choix. (indexVar, valueVar) in values

afin que vous puissiez écrire

<div ng-repeat="(fIndex, f) in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething(fIndex)">Add Something</a>
    </div>
  </div>
</div>

Un niveau plus haut est encore assez propre avec $parent.$index, mais plusieurs parents plus haut, les choses peuvent se gâter.

Nota: $index continuera d'être défini dans chaque champ d'application, il n'est pas remplacé par fIndex .

Answer 3

Jetez un coup d'œil à ma réponse à une question similaire .
En cas d'aliasing $index nous ne sommes pas obligés d'écrire des choses folles comme $parent.$parent.$index .

---

Une solution bien plus élégante que $parent.$index utilise 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

Answer 4

Vous pouvez également contrôler l'index grand-parent par le code suivant

$parent.$parent.$index

Answer 5

Vous pouvez simplement utiliser use $parent.$index .où parent représentera l'objet de l'objet répétitif parent.