Index d'accès du parent ng-repeat depuis l'enfant ng-repeat

218

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

J'ai trouvé un article où quelqu'un recommande d'utiliser $ parent. $ Index, mais ce $indexn'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>

javascript angularjs angularjs-ng-repeat

— Coder1
source

2

Cela semble fonctionner correctement pour moi. J'ai écrit un plunker pour le montrer fonctionnant: plnkr.co/edit/BenCDh4NUGPPHKWGsGMr?p=preview Pouvez-vous fournir plus de détails?

— Piran

Merci pour ça. Cela m'a amené à découvrir que mon problème était un bogue dans mon balisage.

— Coder1

@ Coder1, veuillez envisager de supprimer cette question.

— Mark Rajcok

7

@MarkRajcok Je l'ai envisagé hier soir, mais j'ai pensé qu'il serait utile aux autres de savoir comment procéder, alors je l'ai laissé.

— Coder1

2

Eh bien, si vous souhaitez le conserver, veuillez ajouter une réponse et l'accepter (afin que cette question ne reste pas sur la liste "sans réponse").

— Mark Rajcok

279

Mon exemple de code était correct et le problème était autre chose dans mon code actuel. Pourtant, je sais qu'il était difficile de trouver des exemples de cela, donc 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>

— Coder1
source

13

Aussi - cela m'a jeté pendant un certain temps. S'il existe une directive data-ng-switch dans votre code, vous devrez monter d'un niveau de portée supplémentaire ($ parent. $ Parent. $ Index). Pas joli, je sais.

— Hairgami_Master

D'accord. J'ai dû passer $ parent. $ Parent. $ Index à ma fonction de contrôleur pour obtenir la valeur correcte, puis lier mon ng-show à $ parent. $ Index. Cela me semble être un insecte angulaire

— Andrew Gray

Puis - je faire quelque chose comme ça si j'ai une répétition Collection avec ng répétition Apparemment , il revient undefined faire la même chose?

— Ali Sadiq

6

Juste pour ajouter - vous avez besoin d'un $ parent supplémentaire même si vous avez un ng-ifdans le code comme je viens de le découvrir.

— Plasty Grove

@PlastyGrove Merci de signaler que cela ng-ifnécessite une $parentréférence supplémentaire . M'a sauvé des maux de tête.

— iiminov

219

Selon les documents 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

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 vers le haut est encore assez propre avec $ parent. $ Index mais plusieurs parents vers le haut, les choses peuvent devenir compliquées.

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

— Samuli Ulmanen
source

Je ne comprends pas la note. N'est-ce pas tout l'intérêt de cette question parce que ce n'est pas vrai?

— adam-beck

16

Cela devrait être la réponse validée car elle est plus propre que $parent.$indexcelle

— tdebroc

1

@ adam-beck Je pense qu'ils signifient que lorsque vous utilisez cette (fIndex, f)méthode, $ index sera toujours défini (non omis) - donc l'index devient accessible à la fois comme $indexet fIndex.

— Samuel Jaeschke

1

Pour mon cas, l'utilisation $indexne fonctionne pas, mais l'ajout du fIndexfait. Je n'ai pas la moindre idée de pourquoi $index cela ne fonctionne pas (cela fonctionne ailleurs dans mon code), mais après avoir lutté pendant plusieurs jours, j'ai arrêté de me soucier quand j'ai trouvé cette réponse. Il est également un peu plus lisible lorsque vous disposez de plusieurs ng-repeatIMO.

— Krøllebølle

@ Krøllebølle la raison pour laquelle cela fonctionne comme vous le voyez est que chaque ng-repeatitération crée sa propre portée, qui définit également la sienne $index, écrasant celle du parent $index. Si vous incluez un {{$index}}droit au-dessus ou en dessous de l' ng-repeatélément le plus à l'intérieur , vous verrez la valeur du parent, et le mettre à l'intérieur de l' ng-repeatélément le plus à l'intérieur vous montrera l'enfant. L'utilisation de l'approche dans cette réponse affecte simplement l'index parent à une variable dont vous avez choisi le nom ( fIndex) afin qu'il ne soit pas remplacé par une portée enfant.

— tavnab

44

Jetez un oeil à ma réponse à une question similaire .
En pseudonyme, $indexnous n'avons pas à écrire des trucs fous comme $parent.$parent.$index.

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

— vucalur
source

3

c'est aussi plus sûr! si vous ajoutez un ng-if à l'intérieur de la boucle, vous obtenez l'index $ foiré, vérifiez: plnkr.co/52oIhLfeXXI9ZAynTuAJ

— gonzalon

J'ai dû faire sectionIndex = $ parent. $ Index

— Beanwah

La variable n'est pas mise à jour si vous supprimez un élément qui était dans le tableau de répétition. $ index et $ parent. $ index est toujours le choix sûr

— Bharath Bhandarkar

12

Vous pouvez également obtenir le contrôle de l'index des grands parents par le code suivant

$parent.$parent.$index

— AkRoy
source

1

Cela fonctionne bien pour mon projet. Merci d'avoir fourni une solution géniale!

— Canet Robern

Ce n'est pas extensible, apparemment.

— Ganesh Vellanki

Malheureusement, il s'agit en quelque sorte d'un exemple d'envie de fonctionnalités et évidemment problématique dans de nombreux cas.

— ChiefTwoPencils

2

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

— Vivek Panday
source

0

$ parent ne fonctionne pas s'il y a plusieurs parents. au lieu de cela, nous pouvons définir une variable d'index parent dans init et l'utiliser

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

— Gajanan Prasad
source

voir la réponse de vucalur ici, il le mentionne également. En général, c'est la bonne façon d'aller à l'OMI et généralement seulement une bonne utilisation de ng-init. Chaque fois que les gens atteignent $ parent, vous demandez des problèmes lorsque le contexte de votre code change.

— shaunhusain