從內部ng-repeat訪問ng-repeat $ index

Question

知道ng-repeat創建了作用域后，如何從子ng-repeat訪問父ng-repeat的$index ？

標記

<div ng-repeat="first in arr">
   here there is the first level $index
   <div ng-repeat="second in first.arr">
         in here I need access to the first level $index
   </div>
</div>

Answer 1

每當ng-repeat迭代創建DOM時，它也會創建一個具有新作用域的DOM，新作用域通常是從當前運行的作用域繼承的。

當您想訪問內部ng-repeat中外部ng-repeat的ng-repeat $ index時，可以使用$parent.$index來指示父ng-repeat

<div ng-repeat="first in arr">
   here there is the first level $index
   <div ng-repeat="second in first.arr">
         in here I need access to the first level {{$parent.$index}}
   </div>
</div>

---

盡管解決此問題的更干凈的解決方案是，但在外部ng-repeat上使用ng-init並在scope變量中具有外部index ，通過該變量可以擺脫$parent關鍵字。

<div ng-repeat="first in arr" ng-init="parentIndex=$index">
   here there is the first level $index
   <div ng-repeat="second in first.arr">
         in here I need access to the first level {{parentIndex}}
   </div>
</div>

Answer 2

<div ng-repeat="first in [1,2,3]">
 here there is the first level {{$index}}
 <div ng-repeat="second in ['a', 'b', 'c']">
     in here I need access to the first level {{$parent.$index}} / {{$index}}
 </div>

輸出：

here there is the first level 0
in here I need access to the first level 0 / 0
in here I need access to the first level 0 / 1
in here I need access to the first level 0 / 2
here there is the first level 1
in here I need access to the first level 1 / 0
in here I need access to the first level 1 / 1
in here I need access to the first level 1 / 2
here there is the first level 2
in here I need access to the first level 2 / 0
in here I need access to the first level 2 / 1
in here I need access to the first level 2 / 2