在嵌套的ng-repeat中传递2个$ index值

所以我有一个ng-repeat嵌套在另一个ng-repeat中来构build一个导航菜单。 在内部ng-repeat循环的每个<li>上，我设置了一个ng-click，它通过传递$ index来调用该菜单项的相关控制器，让应用程序知道我们需要哪一个。 不过，我还需要从外部ng-repeat传入$ index，以便应用程序知道我们所在的部分以及哪个教程。

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

这是一个Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Answer 1

每个ng-repeat使用传递的数据创build一个子范围，并在该范围内添加一个额外的$indexvariables。

所以你需要做的是达到父范围，并使用$index 。

请参阅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> 

Answer 2

比$parent.$index更优雅的解决scheme$parent.$index是使用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 3

怎么样使用这个语法（看看这个plunker ）。 我刚刚发现这个，这真是太棒了。

 ng-repeat = (key,value) in data 

例如：

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

有了这个语法，你可以给自己的名字$索引和区分两个索引。

Answer 4

只是为了帮助到达这里的人…你不应该使用$ parent。$ index，因为它不是很安全。 如果你在循环中添加一个ng-if，你会得到$ index！

正确的方法

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

检查： plnkr.co/52oIhLfeXXI9ZAynTuAJ

Answer 5

当你处理对象时，你希望忽略简单的id，尽可能方便。

如果您将点击线更改为此，我认为您将顺利完成任务：

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

另外，我想你可能需要改变

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

类似的东西

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

请参阅http://docs.angularjs.org/misc/faq并查找ng-class。;

Answer 6

我正在尝试使用gonzalon提出的解决scheme。 但在我的情况下不起作用。 当鼠标移动到我通过循环到行和单元格创build的表格的单元格上时，我想要提供更多信息的工具提示。

在将鼠标移动到表格单元格上时，这些值会发生变化，但是行和列的值始终都是列号。

 <div table-data="vm.tableData" ng-if= "vm.table_ready" > <b2b-table> <table> <thead type="header"> <tr> <th ng-repeat = "zone in vm.tableData[0]" >{{zone}}</th> </tr> </thead> <tbody type="body" ng-repeat="row in vm.tableData track by $index" ng-init="rowIndex = $index" ng-if="$index >0" > <tr> <th>{{row[0]}}</th> <td headers="rowheader0" ng-repeat = "cell in row track by $index" ng-init="columnIndex = $index" ng-if="$index >0" ng-mouseover="vm.showTooltip(rowIndex, columnIndex)" ng-mouseleave="vm.hideTooltip()" > {{cell[1]}} </td> </tr> </tbody> </table> </b2b-table> </div>