329

所以我有一个 ng-repeat 嵌套在另一个 ng-repeat 中，以构建导航菜单。在每个<li>内部 ng-repeat 循环中，我设置了一个 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

4

6 回答 6

480

每个 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>
于 2013-03-06T20:38:07.847 回答
207

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

于 2014-01-03T19:35:24.510 回答
122

使用这种语法怎么样（看看这个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并区分这两个索引。

于 2015-07-17T13:53:40.210 回答
34

只是为了帮助到达这里的人......你不应该使用 $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

于 2015-07-12T22:23:22.307 回答
4

只需使用ng-repeat="(sectionIndex, section) in sections"

这将在下一个级别 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>
于 2019-06-02T12:41:00.353 回答
3

在处理对象时，您希望尽可能方便地忽略简单的 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。

于 2013-03-06T20:38:33.453 回答