javascript - 如何在Angular JS中为子行设置索引值

我有一个需要在其中为子行添加索引值的要求。我有组行，下面将有子行。我是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的新手，却不了解如何显示它。我应该怎么做。请帮忙。

最佳答案

据我了解您的问题，您想要的是这样的东西：

<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观看实时示例。

关于javascript - 如何在Angular JS中为子行设置索引值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39494599/