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

Question

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

<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使用传递的数据创建子范围,并$index在该范围中添加另一个变量.

所以你需要做的是达到父范围,然后使用它$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使用方式更优雅的解决方案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>

使用此语法,您可以为自己的名称指定$index并区分这两个索引.

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