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


218

我想使用父列表(foos)的索引作为子列表(foos.bars)中函数调用的参数。

我发现了有人建议使用$ parent。$ index的帖子,但$index不是的属性$parent

如何访问父级的索引ng-repeat

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

2
它对我来说似乎正常工作。我已经写了一个插件来演示它的工作原理plnkr.co/edit/BenCDh4NUGPPHKWGsGMr ? p=preview您能提供更多细节吗?
皮兰

谢谢你 它使我发现我的问题是我的标记中的错误。
Coder1

@ Coder1,请考虑删除此问题。
Mark Rajcok

7
@MarkRajcok昨晚我确实考虑过,但是认为这对其他寻求该方法的人会有帮助,所以我离开了。
Coder1

2
好吧,如果您想保留它,请添加一个答案并接受它(这样,该问题就不会保留在“未答复”列表中)。
Mark Rajcok

Answers:


279

我的示例代码是正确的,问题出在我的实际代码中。不过,我知道很难找到这样的例子,所以我在回答别人的情况。

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

13
另外-这让我感到了一阵子。如果您的代码中包含data-ng-switch指令,则需要上一个附加作用域级别-($ parent。$ parent。$ index)。不漂亮,我知道。
Hairgami_Master 2013年

同意 我需要将$ parent。$ parent。$ index传递给控制器​​函数以获取正确的值,然后将ng-show绑定到$ parent。$ index。对我来说似乎像是个有角的小虫
安德鲁·格雷

我可以做这样的事情,如果我有一个集合重复用NG-重复沿着显然它返回undefined做同样的?
阿里·萨迪克

6
只是添加-即使ng-if我刚刚发现的代码中有一个,也需要一个额外的$ parent 。
Plasty Grove

@PlastyGrove感谢您指出ng-if要求和其他$parent参考。救了我一些头疼。
iiminov

219

根据ng-repeat docs http://docs.angularjs.org/api/ng.directive:ngRepeat,您可以将键或数组索引存储在您选择的变量中。(indexVar, valueVar) in values

所以你可以写

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

使用$ parent。$ index仍然可以很上一层楼,但是如果有几个父母上来,情况可能会变得混乱。

注意:$index将会继续在每个范围内定义,不会被取代fIndex


我不明白该说明。这不是问题的全部重点,因为那是不正确的?
亚当·贝克

16
这应该是经过验证的答案,因为它比$parent.$index一种答案更干净
tdebroc

1
@ adam-beck我认为它们的意思是,使用此(fIndex, f)方法时,仍将定义$ index(不省略)-因此索引可以作为$index和来访问fIndex
Samuel Jaeschke

1
就我而言,使用$index不起作用,但是添加了fIndex。关于为什么 $index不起作用,我没有一个线索(在我的代码的其他地方也是如此),但是在奋斗了几天之后,当我找到这个答案时,我不再关心。当您有多个ng-repeatIMO 时,它也更具可读性。
Krøllebølle

@Krøllebølle起作用的原因是您看到的方式是每次ng-repeat迭代都创建自己的范围,该范围也定义了自己的范围$index,覆盖了父级的范围$index。如果{{$index}}在最里面的ng-repeat-ed元素的上方或下方包含一个右侧,则会看到父级的值,并将其放在最里面的ng-repeat-ed元素内将为您显示子项的值。使用此答案中的方法只是将父索引分配给您选择了名称(fIndex)的变量,这样它就不会被子作用域覆盖。
tavnab

44

看看我对类似问题的回答
通过别名,$index我们不必编写疯狂的东西$parent.$parent.$index


更优雅的解决方案$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


3
也更安全!如果在循环中添加ng-if,则会使$ index混乱,请检查:plnkr.co/52oIhLfeXXI9ZAynTuAJ
gonzalon 2014年

我不得不做sectionIndex = $ parent。$ index
Beanwah 2015年

如果删除重复数组中的元素,则变量不会更新。$ index和$ parent。$ index始终是安全的选择
Bharath Bhandarkar

12

您还可以通过以下代码来控制父级父索引

$parent.$parent.$index

1
这对我的项目来说效果很好。感谢您提供出色的解决方案!
Canet Robern '17

显然,这是不可扩展的。
Ganesh Vellanki

不幸的是,这在某种程度上是令人羡慕的特征,并且在很多情况下显然是有问题的。
ChiefTwoPencils's

2

您可以简单地使用use $ parent。$ index。其中parent将代表父重复对象的对象。


0

如果有多个父母,则$ parent不起作用。而不是我们可以在init中定义父索引变量并使用它

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

请参阅vucalur的答案,这里也提到了这一点。通常,这是进行IMO的正确方法,并且通常仅用于ng-init。任何时候人们达到$ parent时,您的代码上下文发生更改时都在请求麻烦。
shaunhusain
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.