web-dev-qa-db-fra.com

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

J'ai donc un ng-repeat imbriqué dans un autre ng-repeat afin de construire un menu de navigation. Sur chaque <li> de la boucle ng-repeat interne, je règle un clic-ng qui appelle le contrôleur approprié pour cet élément de menu en transmettant l'index $ afin d'indiquer à l'application laquelle il nous faut. Cependant, je dois également passer l'index $ de la commande de répétition externe pour que l'application sache dans quelle section nous nous trouvons, ainsi que dans 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

angularjsangularjs-ng-repeat
315
Tules

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

Donc, ce que vous devez faire est d’atteindre la portée parente et d’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>
460
Alex Osborn

Une 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

199
vucalur

Qu'en est-il de l'utilisation de cette syntaxe (jetez un coup d'œil à ceci 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 à $index et différencier les deux index.

108
Okazari

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 dans la boucle, vous obtenez le $ index foiré!

Bonne manière 

  <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

31
gonzalon

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

Si vous changez la ligne de clic en cela, je pense que vous serez bien sur votre chemin:

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

Aussi, 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.

3
kwerle

Il suffit d'utiliser ng-repeat="(sectionIndex, section) in sections"

et ce sera utilisable au prochain niveau 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>
0
RobKohr