如何將索引值設置爲角js中的子行

我有一個需求，即需要爲子行添加索引值。我有組行，其下會有子行。我ng-repeat，我使用$index爲孩子的，如下所示：如何將索引值設置爲角js中的子行

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，並沒有得到如何顯示它像這樣。我該怎麼做。請幫忙。

來源

2016-09-14 Shruthi Sathyanarayana

因爲您正在使用索引，所以它的顯示方式如此。索引將從每組中的0開始。你的數據實際上是什麼樣的？有沒有理由使用索引而不是實際值？ –

@ Rani Radcliff我不希望數據在那裏顯示。我只是想索引值顯示在那裏，如上所示。有沒有其他方法可以做到這一點？ –

據我理解你的問題，你想有這樣的事情：

<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看到活生生的例子。

來源

2016-09-14 16:16:12

它給出像{0,3}，{0,3,5}這樣的值。但我想要{0,1}，（2,3,4） –

@ShruthiSathyanarayana，請看看我更新的答案，也許它需要修改您的初始數據集以適應。 –

@ShruthiSathyanarayana，它有幫助嗎？ –

如何將索引值設置爲角js中的子行

回答

相關問題