AngularJS multiple nested ng-repeats

Question

I have often done a nested ng-repeat to loop through child data when I have json such as

[
 { "accountnum": 1,
   "name": "foo",
   "subacct": [
      { "accountnum": 1-1,
        "name": "bar"
      } ...
    ]
  } ...
]

And then I use this pattern:

     <tr ng-repeat-start="a in cac.costAccounts">
          <td>{{a.first_name}} {{a.last_name}}</td>
          <td>{{a.account_number}}</td>
          <td>{{a.description}}</td>
        </tr>
        <tr ng-repeat-end ng-repeat-start="sa in a.subacct">
          <td>{{sa.first_name}} {{sa.last_name}}</td>
          <td>{{sa.account_number}}</td>
          <td>{{sa.description}}</td>
        </tr>

This works. But THIS time the data includes a third level; the subacct objects have a key of subsubacct.

[
 { "accountnum": 1,
   "name": "foo",
   "subacct": [
      { "accountnum": 1-1,
        "name": "bar",
        "subsubacct": [
        { "accountnum": 1-1-1,
          "name": "bar"
        } ...
      } ...
    ]
  } ...
]

So I tried adding a third level, but it does not show up (no console errors):

        <tr ng-repeat-start="a in cac.costAccounts">
          <td>{{a.first_name}} {{a.last_name}}</td>
          <td>{{a.account_number}}</td>
          <td>{{a.description}}</td>
        </tr>
        <tr ng-repeat-end ng-repeat-start="sa in a.subacct">
          <td>{{sa.first_name}} {{sa.last_name}}</td>
          <td>{{sa.account_number}}</td>
          <td>{{sa.description}}</td>
        </tr>
        <tr ng-repeat-end ng-repeat="ssa in sa.subsubacct">
          <td>{{ssa.first_name}} {{ssa.last_name}}</td>
          <td>{{ssa.account_number}}</td>
          <td>{{ssa.description}}</td>
        </tr>

So how do I get the third loop?

Marcus Höglund · Accepted Answer · 2017-05-12 14:10:26Z

1

One solution is to use the tbody as this

<tbody ng-repeat="a in cac.costAccounts">
    <tr>
      <td>{{a.first_name}} {{a.last_name}}</td>
      <td>{{a.account_number}}</td>
      <td>{{a.description}}</td>
    </tr>
    <tr ng-repeat-start="sa in a.subacct">
      <td>{{sa.first_name}} {{sa.last_name}}</td>
      <td>{{sa.account_number}}</td>
      <td>{{sa.description}}</td>
    </tr>
    <tr ng-repeat-end="ssa in sa.subsubacct">
      <td>{{ssa.first_name}} {{ssa.last_name}}</td>
      <td>{{ssa.account_number}}</td>
      <td>{{ssa.description}}</td>
    </tr>
</tbody>

answered May 12, 2017 at 14:10

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

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

3 Comments

Steve Over a year ago

The reason I'm trying to do rows is so I can do expanding rows, so the user can view the detail row. That's how I did it in my original single-level method.

Marcus Höglund Over a year ago

@Steve One table can hold many tbody tags so you should be able to hide the inner rows in this cenario as well. Could you provide a plunker and we can sort this out there?

Steve Over a year ago

Let me give this a try. It works for displaying the nested data, I'll try to wire up the hiding/showing and see. Thanks.

Manikandan Velayutham · Accepted Answer · 2017-05-12 14:56:55Z

Try like below.. For tr tags will not work.

var app = angular.module("myApp",[]);
app.controller('ctrl',['$scope', function($scope){
    $scope.cac = [{ "accountnum": 1,
   "name": "first repeat",
   "subacct": [{ "accountnum": 1-1,
        "name": "second repeat",
        "subacct": [{ "accountnum": 1-1-1,
          "name": "third repeat",
          "subacct": [{ "accountnum": 1-1-1,
          "name": "fourth repeat"}] }]
      }
    ]
  }];
  }]);

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<br>

   <div ng-repeat="a in cac">
    <span style="display: table-cell;padding: 3px;border: 1px solid;">{{ a.name }}</span>
    <div ng-include="'test.html'"></div>
</div>

<script type="text/ng-template" id="test.html">
 <div ng-repeat="a in a.subacct">
  <span style="display: table-cell;padding: 3px;border: 1px solid;">{{ a.name }}</span><div ng-include="'test.html'"></div>
 </div>
</script>
</body>
</html>

Collectives™ on Stack Overflow

AngularJS multiple nested ng-repeats

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related