从子ng-repeat访问父ng-repeat的索引

10 浏览
0 Comments

从子ng-repeat访问父ng-repeat的索引

我想在子列表(foos.bars)的函数调用中使用父列表(foos)的索引作为参数。\n我找到了一个帖子,有人建议使用$parent.$index,但$index不是$parent的属性。\n我如何访问父级ng-repeat的索引?\n添加一些东西

0
0 Comments

问题的出现原因是在嵌套的ng-repeat中,想要从子ng-repeat中访问父ng-repeat的索引。然而,使用$parent.$index的方式会显得繁琐且难以理解。

解决方法是通过使用ng-init指令,在父ng-repeat中创建一个新的变量来保存索引。这样,在子ng-repeat中就可以直接使用这个变量来获取父ng-repeat的索引了。

以下是一个示例代码,展示了如何使用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>

在这个例子中,父ng-repeat迭代的是sections数组,而子ng-repeat迭代的是section.tutorials数组。通过使用ng-init指令,我们创建了一个名为sectionIndex的变量,并将其赋值为父ng-repeat的索引$index。

通过这种方式,我们就可以在子ng-repeat中使用sectionIndex变量来访问父ng-repeat的索引了。

此外,使用ng-init的方式还更加安全。如果在循环中添加了ng-if指令,使用$index或$parent.$index可能会导致索引混乱。使用ng-init可以避免这个问题。

最后,如果想要查看示例代码的运行效果,可以访问Plunker链接:http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info

如果想要查看一个带有ng-if指令的示例,可以访问以下链接:plnkr.co/52oIhLfeXXI9ZAynTuAJ

总之,通过使用ng-init指令,我们可以更加优雅地解决在嵌套的ng-repeat中访问父ng-repeat索引的问题,并且能够避免一些潜在的问题。

0
0 Comments

在ng-repeat文档中,可以使用自定义变量来存储键或数组索引,格式为(indexVar, valueVar) in values。所以可以写成:


当在父级ng-repeat中的子级ng-repeat中访问父级索引时,可以使用$parent.$index。然而,如果有多个父级,这种方法会变得混乱。注意:$index在每个作用域中都会被定义,不会被fIndex替代。但是,我不明白这个说明的意思。难道不是因为这个问题才有了吗?这个回答应该是正确的,因为它比$parent.$index更简洁。

-beck认为他们的意思是使用(fIndex, f)这种方法时,$index仍然会被定义(不会被省略),所以索引可以作为$index和fIndex都访问到。

在我的情况下,使用$index不起作用,但是添加fIndex就可以。我对为什么$index不起作用一无所知(在我的代码其他地方可以使用),但是在苦苦挣扎了几天后,当我找到这个答案时,我就不再关心了。在我看来,这个答案更容易阅读,特别是当有多个ng-repeat时。

øllebølle解释道,之所以能够看到这种效果,是因为每个ng-repeat迭代都会创建自己的作用域,这个作用域也定义了自己的$index,覆盖了父级的$index。如果你在最内层的ng-repeat元素的上方或下方包含{{$index}},你会看到父级的值;将其放在最内层的ng-repeat元素内部,你会看到子级的值。使用此回答中的方法,只需将父级索引赋值给自定义变量(如fIndex),这样就不会被子作用域覆盖了。

0
0 Comments

最近,我在我的实际代码中遇到了一个问题,但是我的示例代码是正确的。尽管如此,我知道很难找到这方面的示例,所以我还是决定回答这个问题,以防其他人也在寻找答案。

问题是这样的:我有一个嵌套的ng-repeat循环,我想从内部循环中访问外部循环的索引。我尝试使用$parent.$index来达到这个目的,但是并没有成功。我发现,如果在代码中有一个data-ng-switch指令,那么需要再多加一个$parent的层级才能访问到正确的索引,即$parent.$parent.$index。这看起来确实不太美观,但是这是解决该问题的方法。

下面是我遇到问题时的代码示例:

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

另外,我还发现,即使在代码中有一个ng-if指令,也需要再多加一个$parent的层级。因此,如果有一个ng-if指令,需要使用$parent.$parent.$index来访问正确的索引。

最后,我想补充一点,如果我在控制器函数中想要获取正确的值,我需要将$parent.$parent.$index传递给控制器函数,然后将ng-show绑定到$parent.$index。对我来说,这似乎是一个angular的bug。

另外还有一个问题,如果同时有一个Collection repeat和ng-repeat循环,我能否像这样做?显然,这样做会返回undefined。

总之,感谢提醒我在代码中使用ng-if时需要额外的$parent引用。这避免了我一些麻烦。

0