Using ng-repeat with ng-include to create a recursive table
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).
Answer
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>