Showing a hierarchy using ng-repeat in a table - angularjs

Question

I need to display some hierarchical data stored in a json object in an html table. I tried with the following code from jsfiddle: http://jsfiddle.net/mrajcok/vGUsu/
//HTML
<div ng-controller="MyCtrl">
<my-table rows='rows'></my-table>
</div>
//javascript
var myApp = angular.module('myApp', []);
myApp.directive('myTable', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var html = '<table>';
angular.forEach(scope[attrs.rows], function (row, index) {
html += '<tr><td>' + row.name + '</td></tr>';
if ('subrows' in row) {
angular.forEach(row.subrows, function (subrow, index) {
html += '<tr><td>' + subrow.name + '</td></tr>';
})
}
})
html += '</table>';
element.replaceWith(html)
}
}
});
function MyCtrl($scope) {
$scope.rows = [
{ name: 'a', subrows: [{ name: 'a.1' }, { name: 'a.2' }] },
{ name: 'b', subrows: [{ name: 'b.1',subrows: [{ name: 'b.1.1' }, { name: 'b.1.2' }] }, { name: 'b.2' }] }
];
}
I get the output as:
a
a.1
a.2
b
b.1
b.2
But I need to get:
a
a.1
a.2
b
b.1
b.1.1
b.1.2
b.2
I should be able to traverse as many levels as possible and show them in a table. How can I do that?

Answer 1

It seems that you have a data structure in the shape of a tree and you could solve it with a recursive function to explore your tree.
I wrote the following piece of code that should get you on your way. I'm pretty sure it can be done a bit more elegantly by using additional variables.
JS: (did not alter your controller)
var myApp = angular.module('myApp', []);
myApp.directive('myTable', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var text = '';
function tableRec(array) {
if(array.length === 0) {
return text;
} else {
var obj = array.shift();
text += '<tr><td>' + obj.name + '</td></tr>';
//if there are subrows we go deeper into the recursion
if(obj.subrows) {
tableRec(obj.subrows);
}
tableRec(array);
}
}
tableRec(scope[attrs.rows]);
var html = '<table>' + text + '</table>';
element.replaceWith(html)
}
}
});
HTML: (unaltered)
<div ng-controller="MyCtrl">
<my-table rows='rows'></my-table>
</div>
OUTPUT:
a
a.1
a.2
b
b.1
b.1.1
b.1.2
b.2
You can also find my plunker here.