Question

所以我有一个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

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）。我刚刚发现了它并且非常棒。

WITH cte AS (
    SELECT DISTINCT 
       Anvendelseskoder.[Usage Code] AS [Byggeanvendelseskode],
       Anvendelseskoder.[Usage Code Value] AS [Byggeanvendelse],
       HeleDanmark_DAWA.KVHx,
       Nr = ROW_NUMBER() OVER(PARTITION BY HeleDanmark_DAWA.KVHx 
                              ORDER BY Anvendelseskoder.[Usage Code])
    FROM Anvendelseskoder 
    RIGHT JOIN HeleDanmark_DAWA 
     ON Anvendelseskoder.KVHx = HeleDanmark_DAWA.KVHx
    WHERE HeleDanmark_DAWA.postnr=6720 AND Anvendelseskoder.[Usage Code]>0
)

SELECT KVHx, 
    MAX(CASE WHEN Nr = 1 THEN Byggeanvendelseskode END) AS Kode1, 
    MAX(CASE WHEN Nr = 1 THEN Byggeanvendelse END) AS Anvend1,
    MAX(CASE WHEN Nr = 2 THEN Byggeanvendelseskode END) AS Kode2, 
    MAX(CASE WHEN Nr = 2 THEN Byggeanvendelse END) AS Anvend2,
    MAX(CASE WHEN Nr = 3 THEN Byggeanvendelseskode END) AS Kode3, 
    MAX(CASE WHEN Nr = 3 THEN Byggeanvendelse END) AS Anvend3
FROM cte 
GROUP BY KVHx;

示例：

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>并区分这两个索引。

Answer 4

只是为了帮助那些到达这里的人......你不应该使用$ parent。$ index，因为它不是很安全。如果在循环中添加ng-if，则会得到$ index messed！

正确的方式

  <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

Answer 5

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

Answer 6

只需使用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>

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

6 个答案: