web-dev-qa-db-fra.com

Indice d'accès du parent ng-repeat à partir de l'enfant ng-repeat

Je veux utiliser l'index de la liste parente (foos) comme argument pour un appel de fonction dans la liste des enfants (foos.bars).

J'ai trouvé un article 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>
javascriptangularjsangularjs-ng-repeat
214
Coder1

Mon code d'exemple était correct et le problème était quelque chose d'autre dans mon code réel. Néanmoins, je sais qu'il était difficile de trouver des exemples, alors je réponds au cas où quelqu'un d'autre regarderait.

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

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

pour pouvoir é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 supérieur est encore assez propre avec $ parent. $ Index mais plusieurs parents supérieurs, les choses peuvent devenir compliquées.

Remarque: $index continuera d'être défini à chaque portée, il n'est pas remplacé par fIndex.

217
Samuli Ulmanen

Jetez un oeil à ma réponse à une question similaire .
En aliasant $index nous n’avons pas besoin d’écrire des choses folles comme $parent.$parent.$index.

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

41
vucalur

Vous pouvez également obtenir le contrôle de l'index grand parent à l'aide du code suivant

$parent.$parent.$index
11
user3728092

Vous pouvez simplement utiliser $ parent. $ Index. Où parent sera l’objet de l’objet répété parent.

2
Vivek Panday