为什么$parent.$index等于$index？

Question

在AngularJS 1.6.3中，基本上可以嵌套ng-重复。

我已经确定，在两个嵌套的ng-重复中，$parent.$index等于$index。

给出了以下代码：

<div ng-repeat="category in :: $ctrl.categories">
  <span id="category-{{ $index }}">
    {{ :: category.name }}
  </span>

  <ul>
   <li ng-repeat="data in :: category.links"
       id="link-{{ $parent.$index }}-{{ $index }}">
     {{ :: data.name }}
   </li>
  </ul>
</div>

期望为LI生成ID：

<div>
  <span id="category-0">CatA</span>

  <ul>
    <li id="link-0-0">[..]</li>
    <li id="link-0-1">[..]</li>
    <li id="link-0-2">[..]</li>
  </ul>
</div>

<div>
  <span id="category-1">CatB</span>

  <ul>
    <li id="link-1-0">[..]</li>
    <li id="link-1-1">[..]</li>
  </ul>
</div>

为LI生成ID的实际：

<div>
  <span id="category-0">CatA</span>

  <ul>
    <li id="link-0-0">[..]</li>
    <li id="link-1-1">[..]</li>
    <li id="link-2-2">[..]</li>
  </ul>
</div>

<div>
  <span id="category-1">CatB</span>

  <ul>
    <li id="link-0-0">[..]</li>
    <li id="link-1-1">[..]</li>
  </ul>
</div>

有人能证实这种行为吗？还是我错过了什么？

Answer 1

按预期工作。

​

angular.module('test', []).controller('Test', Test);

function Test($scope) {
  var $ctrl = this;
  
  $ctrl.categories = [
    {
      name: 'cat1', 
      links: [{name: 'l1'}, {name: 'l2'}, {name: 'l3'}]
    },
    {
      name: 'cat2',
      links: [{name: 'l4'}, {name: 'l5'}]
    }
  ]
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app='test' ng-controller='Test as $ctrl'>
  <div ng-repeat="category in :: $ctrl.categories">
    <span id="category-{{ $index }}">
      {{ :: category.name }}
    </span>

    <ul>
     <li ng-repeat="data in :: category.links"
         id="link-{{ $parent.$index }}-{{ $index }}">
       {{ :: data.name }}
     </li>
    </ul>
  </div>
</div>

​

您可能在您的子层周围有一些范围生成元素，例如ng-if、ng-repeat、ng-switch。在这种情况下，您需要添加更多的$parent层