爲什麼$ parent。$ index等於$ index？

Question

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

我已經確定，在兩個嵌套的ng-repeat $ 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> 

預計導致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> 

實際導致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