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
– Rani Radcliff, Commented Sep 14, 2016 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
– Shruthi Sathyanarayana, Commented Sep 14, 2016 at 16:01

Community · Accepted Answer · 2017-05-23 12:08:22Z

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, 2017 at 12:08

CommunityBot

11 silver badge

answered Sep 14, 2016 at 16:16

Artyom Pranovich

6,9728 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shruthi Sathyanarayana Over a year ago

It is giving values like, {0,3}, {0,3,5}. But I want like {0,1} , (2,3,4}

Artyom Pranovich Over a year ago

@ShruthiSathyanarayana, please look at my updated answer and perhaps it would need to modify your initial dataset in order to fit in.

Artyom Pranovich Over a year ago

@ShruthiSathyanarayana, does it help?

Shruthi Sathyanarayana Over a year ago

@ Artyom Pranovich It's still displaying like {0,3} , {0,3,7)

Artyom Pranovich Over a year ago

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

|

Collectives™ on Stack Overflow

How to set index values to child rows in angular js

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related