首页 文章

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

提问于
浏览 次
301

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

angularjs angularjs-ng-repeat

6 回答

  • 0

    每个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>
    回复于
  • 100

    当你处理对象时，你想要方便地忽略简单的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 .

    回复于
  • 3

    只是为了帮助那些到达这里的人......你不应该使用$ parent . $ index，因为它不太安全 . 如果在循环中添加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>

    检查：plnkr.co/52oIhLfeXXI9ZAynTuAJ

    回复于
  • 192

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

    回复于
  • 442

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

    回复于
  • 30

    我正在尝试使用gonzalon提出的解决方案 . 但它在我的情况下不起作用 . 当鼠标通过循环到行和单元格创建的表格的单元格上时，我希望有一个包含更多信息的工具提示 .

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

    <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>
    回复于

相关问题