Angularjs 双重循环获取父级下标$index

在angular.js中，我们遍历时会使用ng-repeat="col in arr track by $index"这个指令，通过 $index即可获取当前项在该数组中的索引下标。但是当有两层循环（也就是使用了两层的ng-repeat=“col in arr track by $index”）的情况下， $index则是本层循环的索引，当我们的子级元素想要获取父级元素的索引该怎么办呢？

$parent. $index

当两个ng-repeat写在一起的时候，使用$parent. $index即可获取父级下标；如果想要获取父级的父级的下标，则需要在前面多一个 $parent，也就是 $parent. $parent. $index来进行获取，以此类推。

代码如下：

<table>  
    <tr ng-repeat="col in arr track by $index" >  
          <td ng-repeat="son_col in col track by $index">
            <-- $parent. $index获取tr的索引 -->
          	<span ng-click="get_father_index($parent.$index)">{{son_col}}
          		<-- $parent.$parent.$index获取tr的索引 -->
          		<div ng-repeat="item in son_col track by $index">
          			<b ng-click="get_grandfather_index($parent.$parent.$index)">{{item}}</b>
          		</div>
          	</span>
           </td>  
     </tr>  
</table>  

需要注意的特殊情况

当该层元素使用了ng-if指令，则通过 $parent. $index获取到的不是父级元素的索引，而是当前层的索引 $index，此时我们为了避免这种情况的发生，应该是用ng-show来代替ng-if。

代码如下：

<table>  
    <tr ng-repeat="col in arr track by $index" >   
          <td ng-repeat="son_col in col track by $index">
          	<-- $parent. $index获取到的是tr的索引 -->
          	<span ng-click="get_index($parent.$index)">{{son_col}}</span>
          	<-- $parent. $index获取到的是当前td的索引 -->
          	<span ng-click="get_index($parent.$index)" ng-if="$index != 0">{{son_col}}</span>
          	<-- $parent. $index获取到的是tr的索引 -->
          	<span ng-click="get_index($parent.$index)" ng-show="$index != 0">{{son_col}}</span>
          </td>  
   </tr>  
</table>