关于angularjs：在嵌套的ng-repeat中传递2个$ index值


passing 2 $index values within nested ng-repeat

因此，我在另一个ng-repeat中嵌套了一个ng-repeat，以构建导航菜单。 在内部ng-repeat循环的每个

  • 上，我设置一个ng-click，它通过传入$ index来调用该菜单项的相关控制器，以使应用知道我们需要哪个。 但是，我还需要从外部ng-repeat传递$ index，以便应用程序知道我们在哪个部分以及哪个教程中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <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>

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

    相关讨论

    每个ng-repeat都会使用传递的数据创建一个子作用域，并在该作用域中添加一个附加的$index变量。

    因此，您需要做的是达到父作用域，并使用该$index。

    看到http://plnkr.co/edit/FvVhirpoOF8TYnIVygE6?p=preview

    1
    2
    3
    4
    <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">
        {{tutorial.name}}

    </li>
    相关讨论

    比$parent.$index更优雅的解决方案是使用ng-init：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <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

    相关讨论

    如何使用这种语法(请看一下这个插件)。我刚刚发现了它，而且非常棒。

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

    例：

    1
           {{indexX}} - {{indexY}} - {{value}}

    使用这种语法，您可以将自己的名字命名为$index，并区分两个索引。

    相关讨论

    只是为了帮助到达这里的人...您不应该使用$ parent。$ index，因为它并不真正安全。如果在循环中添加ng-if，则会使$ index混乱！

    正确的路

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      <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}}]
              <small ng-if="rowIndex != columnIndex">[{{rowIndex}} - {{columnIndex}}]</small>

            </td>
        </tr>
      </table>

    检查：plnkr.co/52oIhLfeXXI9ZAynTuAJ

    相关讨论

    在处理对象时，您想尽可能地忽略简单的id。

    如果您将点击线更改为此，我认为您会顺利进行的：

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

    另外，我认为您可能需要更改

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

    像

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

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

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

    并且可以在下一级ng-repeat down上使用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <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>