Using ng-repeat with ng-include to create a recursive table

Question

I've done a bit of research around and I cannot seem to find the best pattern to use ng-repeat recursively to create a deep table. There is some noteworthy mentions here by user mgdelmonte regarding the subject, but alas, no solution.

The HTML and template:

<body ng-app="myApp">
    <div ng-controller="myAppController">

<script type="text/ng-template"  id="tree_item.html">
    <tr style="width:100%">        
        <td>{{data.name}}</td>
    </tr>
    <div ng-repeat="data in data.nodes" ng-include="'tree_item.html'">

    </div>
</script>

<table class="table table-striped">
     <thead>
        <tr>
            <th style="width:30px;">Test</th>
        </tr>
    </thead>
    <tbody ng-repeat="data in treeData" ng-include="'tree_item.html'">

    </tbody>
</table>
</div>
</body>

The JS:

angular.module('myApp', []);

function myAppController($scope) {
    $scope.treeData = [{
        "name": "Root",
        "nodes": [{
            "name": "Level 1",
            "nodes": [{
                "name": "Level 2"
            }]
        }]
    }];
}

Here is my jsfiddle: http://jsfiddle.net/8f3rL/86/

This is the absolute farthest I got with it. It traverses the tree fine, but I'm losing the <tr> tags when it recurses down. Instead it's rendering <span>s.

My intuition is telling me that when the ng-repeat runs on that <div>, it is creating a separate scope for those trs and tds, which I guess are illegal (since they have to be bound to a table element).

Changing the div to a table or tbody or tr is no-op as well (not that I'd even want to nest a table in like that).

Maybe this is a dumb question, but you're doing ng-repeat with a <tbody> element. Is that legal? I expect a <table> to have exactly one <tbody>, but maybe I'm dumb :) Another silly question, what is a "deep table"? — Sunil D.
– Sunil D., Commented Jul 23, 2014 at 6:50
Not dumb at all. The tbody and div inside a table are the problem. — Anthony Chu
– Anthony Chu, Commented Jul 23, 2014 at 6:58

Anthony Chu · Accepted Answer · 2014-07-23 06:55:53Z

6

The browser doesn't like the multiple tbodys and the div tags between the rows. Try this...

<body ng-app="myApp">
    <div ng-controller="myAppController">

<script type="text/ng-template"  id="tree_item.html">
    <td>{{data.name}}
        <table style="margin-left: 20px">
            <tr ng-repeat="data in data.nodes" ng-include="'tree_item.html'"></tr>
        </table>
    </td>
</script>

<table class="table table-striped">
     <thead>
        <tr>
            <th style="width:30px;">Test</th>
        </tr>
    </thead>
    <tbody>
        <tr style="width:100%" ng-repeat="data in treeData" ng-include="'tree_item.html'"></tr>
    </tbody>
</table>
</div>

Live Demo - Fiddle

answered Jul 23, 2014 at 6:55

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

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

3 Comments

Sunil D. Over a year ago

Yeah, good call on the <div> being inserted outside of the <td> ... and for being nice enough to provide a solution.

user2857125 Over a year ago

Thanks for the reply. However, this is still a bit unfortunate because we are nesting table elements. Consider what would happen if we placed a border on the tables... jsfiddle.net/V9a2Z/1

Hugo Nakamura Over a year ago

Hi @Anthony I know it's beent a while but how would you do with a table with multiple <th>? Where would you place the <table> that contains the ng-include?

Collectives™ on Stack Overflow

Using ng-repeat with ng-include to create a recursive table

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related