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

IT技术 javascript angularjs angularjs-ng-repeat
2021-02-26 23:41:12

我想使用父列表 (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>
6个回答

我的示例代码是正确的,问题出在我的实际代码中。尽管如此,我知道很难找到这样的例子,所以我会回答它以防其他人正在寻找。

<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
2021-05-08 23:41:12
@PlastyGrove 感谢您指出ng-if需要和额外的$parent参考。让我有点头疼。
2021-05-10 23:41:12
还有——这让我有一段时间。如果你的代码中有 data-ng-switch 指令,你需要增加一个额外的范围级别 - ($parent.$parent.$index)。不漂亮,我知道。
2021-05-12 23:41:12
同意。我需要将 $parent.$parent.$index 传递给我的控制器函数以获得正确的值,然后将我的 ng-show 绑定到 $parent.$index。对我来说似乎是一个角度错误
2021-05-12 23:41:12
如果我有一个 Collection 和 ng-repeat 重复,我可以做这样的事情吗?显然它正在返回 undefined 做同样的事情
2021-05-12 23:41:12

根据 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.

@Krøllebølle 它以您所见的方式工作的原因是每次ng-repeat迭代都会创建自己的范围,该范围也定义了自己$index$index. 如果{{$index}}在最里面的ng-repeat-ed 元素的上方或下方包含一个right ,您将看到父元素的值,将其放入最里面的ng-repeat-ed 元素将显示子元素的值。使用此答案中的方法只是将父索引分配给您选择的名称 ( fIndex)的变量,因此它不会被子作用域覆盖。
2021-04-17 23:41:12
我不明白注释。这个问题的全部意义不是因为那不是真的吗?
2021-04-25 23:41:12
@adam-beck 我认为他们的意思是在使用此(fIndex, f)方法时,仍会定义 $index(不会省略)-因此索引可以同时作为$index访问fIndex
2021-05-01 23:41:12
就我而言,使用$index不起作用,但添加fIndex确实如此。我没有任何关于为什么 $index不起作用的线索(它在我的代码中的其他地方起作用),但是在挣扎了几天之后,当我找到这个答案时,我不再关心了。当您有多个ng-repeats IMO时,它也更具可读性
2021-05-03 23:41:12
这应该是有效的答案,因为它是清洁比$parent.$index一个
2021-05-12 23:41:12

看看我对类似问题的回答
通过别名,$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

我不得不做 sectionIndex = $parent.$index
2021-04-16 23:41:12
也更安全!如果在循环中添加 ng-if,则会将 $index 弄乱,请检查:plnkr.co/52oIhLfeXXI9ZAynTuAJ
2021-04-30 23:41:12
如果删除重复数组中的元素,则该变量不会更新。$index 和 $parent.$index 始终是安全的选择
2021-04-30 23:41:12

您还可以通过以下代码获得对祖父索引的控制

$parent.$parent.$index
这对我的项目很有效。感谢您提供很棒的解决方案!
2021-04-22 23:41:12
这显然是不可扩展的。
2021-05-04 23:41:12
不幸的是,这在某种程度上是功能嫉妒的一个例子,并且在许多情况下显然有问题。
2021-05-14 23:41:12

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