Assigning index values to child rows in AngularJS: a step by step guide

Question

Assigning index values to child rows in AngularJS: a step by step guide

One of my requirements involves assigning index values to child rows. The structure includes group rows with child rows underneath. Currently, I am using ng-repeat along with $index for the children as shown below:

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>

However, the output is different from what I want:

https://i.stack.imgur.com/uQGyJ.png

I aim to achieve a display similar to this:

https://i.stack.imgur.com/ZNYAw.png

Being new to AngularJS, I am unsure about how to accomplish this layout. Any guidance on how I can achieve the desired result would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

Upon reviewing your query, it seems like you are seeking something along these lines:

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

To achieve this structure, you will need to manipulate $parent.$index property while utilizing some mathematical operations.

The final result will resemble the image linked below:

https://i.stack.imgur.com/TD10U.jpg

For a live demonstration, refer to this JSFiddle example.

Answer 2

Upon reviewing your query, it seems like you are seeking something along these lines:

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

To achieve this structure, you will need to manipulate $parent.$index property while utilizing some mathematical operations.

The final result will resemble the image linked below:

https://i.stack.imgur.com/TD10U.jpg

For a live demonstration, refer to this JSFiddle example.

Assigning index values to child rows in AngularJS: a step by step guide

Answer №1

Similar questions

The REST API is producing a "Network connection Failure" error in Chrome, while it is functioning correctly in Firefox

Monitor Socket IO for client disconnection events

Transitioning from a traditional CURL method to utilizing AJAX and XMLHttp

How can I ensure my AngularJS Controller variable is accessible across all page contexts?

AngularJS: Issue with JQuery Slider not Updating Scope Value

Utilizing properties to transfer a reference object to a nested component

How to handle an unexpected keyword 'true' error when using the `useState` hook in React?

What is the best way to break out of a function halfway through?

How can I include an md-icon in an md-button within node-red-dashboard?

Pass on the error to the callback in Node.js

Using a checkbox to enlarge a table

Have you ever wondered why a listener on the 'data' event interprets two separate requests as one, unless a timeout is added?

When it comes to using the jQuery get method, it may not always yield the desired results. However, utilizing it within a form context,

Why is passing data:{} to a route essential for achieving the desired outcome?

Tips for swapping out a div tag with another div tag in the same spot without needing to redirect to a different page by utilizing bootstrap

JavaScript updates the cursor after the completion of the JS function

Difficulty in comparing passwords using bcrypt encryption method

Preventing horizontal swiping while vertically scrolling on mobile devices

Node app experiencing issues with passport authentication request route only in production mode

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set