如何将索引值设置为角js中的子行

Question

我有一个需求，即需要为子行添加索引值。我有组行，其下会有子行。我ng-repeat，我使用$index为孩子的，如下所示：

HTML代码：

<table ng-repeat="node in data"> 
<tr> <td> {{node.groupName}} </td> </tr> 
<tbody ng-model="node.nodes"> 
<tr ng-repeat="node in node.nodes"> <td> {{$index}} </td> </tr> 
</table> 

但它显示如：

但我想它显示为如图所示：

我是新来的Angular JS，并没有得到如何显示它像这样。我该怎么做。请帮忙。

Answer 1

据我理解你的问题，你想有这样的事情：

<table ng-repeat="group in data"> 
    <thead> 
    <th> {{group.name}} </th> 
    </thead> 
    <tbody ng-repeat="item in group.items"> 
    <tr> 
     <td>{{getIndex($parent.$index - 1, $index)}} | {{item}} </td> 
    </tr> 
    </tbody> 
</table> 

    $scope.data = [ 
     {name: 'Group1', items: ['a','b']},   
     {name: 'Group2', items: [1,2,3]}, 
     {name: 'Group3', items: ['x', 'xx', 'xxx', 'xxxx']} 
    ]; 

    $scope.getIndex = function(previousGroupIndex, currentItemIndex){ 
     if(previousGroupIndex >= 0){ 
     var previousGroupLength = getPreviousItemsLength(previousGroupIndex); 
     return previousGroupLength + currentItemIndex; 
     } 
     return currentItemIndex; 
    }; 

    function getPreviousItemsLength(currentIndex){ 
     var length = 0; 
     for (var i = 0; i <= currentIndex; i++){ 
     length += $scope.data[i].items.length; 
     } 
     return length; 

     // or even better to use Array.prototype.reduce() for that purpose 
     // it would be shorter and beautiful 
     // return $scope.data.reduce(function(previousValue, currentGroup, index){ 
     // return index <= previousGroupIndex ? previousValue + currentGroup.items.length : previousValue; 
     // }, 0); 
    } 

您需要$parent.$index性能发挥和利用一些数学:)，以实现这一目标。

它看起来像下面这样：

退房this JSFiddle看到活生生的例子。