How to set index values to child rows in angular js

Question

I have a requirement where I need to add index values for child rows. I have Group rows under which there will be child rows. I am ng-repeat and I am using $index for child's as shown:

HTML code:

<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>

But it is displaying as shown:

But I want it to display as shown:

I am new to Angular JS and not getting how to display it like this. How am I supposed to do that. Please help.

It's displaying like that because you are using index. Index will start over at 0 within each group. What does your data actually look like? Is there a reason you are using index instead of actual values? — Rani Radcliff, Sep 14 '16 at 15:49
@ Rani Radcliff I don't want data to display there. I just want index values to display there as shown above. Is there any other method to do that?? — Shruthi Sathyanarayana, Sep 14 '16 at 16:01

score 1 · Accepted Answer · edited May 23 '17 at 12:08

1

As far as I understood your question, you'd like to have something like that:

<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);
    }

You need to play with $parent.$index property and use some math :) in order to achieve that.

It would look like the following:

Check out this JSFiddle to see live example.

edited May 23 '17 at 12:08

Community

1
1

answered Sep 14 '16 at 16:16

Artyom Pranovich

6,814
8
41
60

It is giving values like, {0,3}, {0,3,5}. But I want like {0,1} , (2,3,4} – Shruthi Sathyanarayana Sep 14 '16 at 16:28
@ShruthiSathyanarayana, please look at my updated answer and perhaps it would need to modify your initial dataset in order to fit in. – Artyom Pranovich Sep 14 '16 at 16:29
@ShruthiSathyanarayana, does it help? – Artyom Pranovich Sep 14 '16 at 16:36
@ Artyom Pranovich It's still displaying like {0,3} , {0,3,7) – Shruthi Sathyanarayana Sep 14 '16 at 16:38
@ShruthiSathyanarayana, Have you checked my live example? I've provided you basic idea/alghorythm for your question. But I can not apply it for your code, because I don't have your initial background, exact dataset and so on.. – Artyom Pranovich Sep 14 '16 at 16:43
@ Artyom Pranovich I will try to apply the similar logic. Thanks so much for the help :) – Shruthi Sathyanarayana Sep 14 '16 at 16:45

How to set index values to child rows in angular js

1 Answers1