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

本文翻译自：passing 2 $index values within nested ng-repeat

So I have an ng-repeat nested within another ng-repeat in order to build a nav menu. 因此，我在另一个ng-repeat中嵌套了一个ng-repeat，以构建导航菜单。 On each <li> on the inner ng-repeat loop I set an ng-click which calls the relevant controller for that menu item by passing in the $index to let the app know which one we need. 在内部ng-repeat循环的每个<li>上，我都设置了一个ng-click，它通过传入$ index来调用该菜单项的相关控制器，以使应用知道我们需要哪个。 However I need to also pass in the $index from the outer ng-repeat so the app knows which section we are in as well as which tutorial. 但是，我还需要从外部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>

here's a Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview 这是一个傻瓜http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

---

#1楼

参考：https://stackoom.com/question/120wC/在嵌套的ng-repeat中传递-个-index值

---

#2楼

Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope. 每个ng-repeat都会使用传递的数据创建一个子作用域，并在该作用域中添加一个附加的$index变量。

So what you need to do is reach up to the parent scope, and use that $index . 因此，您需要做的是达到父级作用域，并使用该$index 。

See http://plnkr.co/edit/FvVhirpoOF8TYnIVygE6?p=preview 看到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>

---

#3楼

When you are dealing with objects, you want to ignore simple id's as much as convenient. 在处理对象时，您想尽可能地忽略简单的id。

If you change the click line to this, I think you will be well on your way: 如果您将点击线更改为此，我认为您会顺利进行的：

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

Also, I think you may need to change 另外，我认为您可能需要更改

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

to something like 像

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

See http://docs.angularjs.org/misc/faq and look for ng-class. 参见http://docs.angularjs.org/misc/faq并查找ng-class。

---

#4楼

Way more elegant solution than $parent.$index is using ng-init : 比$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 Plunker： http ://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info

---

#5楼

Just to help someone who get here... You should not use $parent.$index as it's not really safe. 只是为了帮助到达这里的人...您不应该使用$ parent。$ index，因为它并不真正安全。 If you add an ng-if inside the loop, you get the $index messed! 如果在循环中添加ng-if，则会使$ index混乱！

Right way 正确的路

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

Check: plnkr.co/52oIhLfeXXI9ZAynTuAJ 检查： plnkr.co/52oIhLfeXXI9ZAynTuAJ

---

#6楼

What about using this syntax (take a look in this plunker ). 如何使用这种语法（请看一下这个plunker ）。 I just discovered this and it's pretty awesome. 我刚刚发现了它，而且非常棒。

ng-repeat="(key,value) in data"

Example: 例：

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

With this syntax you can give your own name to $index and differentiate the two indexes. 使用这种语法，您可以给$index命名，并区分两个索引。