AngularJS directive to render a JSON tree as indented table - recursion

Question

I want to render a multi-column tree (i.e. tree table or tree grid) in Angular. My data is a tree of arbitrary depth, and looks something like this:
[
{name: "node 1",
type: "folder",
children: {[
{name:"node 1-1", type:file},
{name:"node 1-2", type:file},
{name:"node 1-3", type:file},
]}
},
...
...
]
I've seen examples that use recursive templates to render this in a ul/li tree, but I need multiple columns, so I think I need a table. So far the best HTML I have come up with to render the above data structure would look something like:
<tr>
<td>
node 1
</td>
<td>
folder
</td>
</tr>
<tr>
<td>
<span class="treetable-padding"/>
node 1-1
</td>
<td>
file
</td>
</tr>
...
...
So, in other words it's just a flat table where the tree depth is represented using a number of span elements, with that number being equal to that level in the hierarchy.
I am not great with html/AngularJS/js in general so I don't know if this is the best way to render my data, but it certainly looks the way I want.
My question is, what's the best way to do this using AngularJS? I know I can build a monolithic chunk of html like this in JavaScript and then wrap that in a custom directive, but I'm looking for a solution that's more in the spirit of Angular, so that I can take advantage of data binding etc. I ultimately want the cells to be editable so I don't want to do anything that will make data binding messy.
I thought of writing some code to flatten my tree into a list of objects that explicitly contain a "depth" attribute. Then maybe I could use ng-repeat. But I thought maybe there is a cleaner way using one or more custom directives
Thanks!

Answer 1

I have something that works now. It works in the way I described in my comment on my question above. Just to recap, I'm using 2 custom directives, both of which are based on ng-repeat. The first one builds a flat table structure with literal values in the class attribute to indicate depth. The second directive uses that depth information to repeat the padding element the appropriate number of times. Both repeaters use transclusion to minimize restrictions/dependencies on the html. The only caveat is that the second repeater needs the depth info to be somewhere in it's ancestry within the DOM.
Here's what the HTML template looks like for producing a tree-table of the structure I described in my question:
<table class="treetable" style="width: 40%;">
<tr class="treetable-node" my-repeat="item in things"
my-repeat-children="children">
<td>
<span my-repeat-padding class="treetable-node-indent"></span>
{{ item.name }}
</td>
<td>
{{ item.type }}
</td>
</tr>
</table>
I based my custom repeater on this example. What makes mine different is that you can specify a "children" property and the directive logic will check for that property on each item, and descend recursively into it if it's there - although it attaches all new elements to the same parent, giving me the flat structure.
It's probably pretty inefficient, and could use some optimization - like the code in the link I provided, it rebuilds everything when there's a change.
myApp.directive("myRepeat", function($parse) {
return {
restrict: "A",
replace: true,
transclude: "element",
link: function (scope, element, attrs, controller, transclude) {
match = attrs.myRepeat.match(/^\s*(.+)\s+in\s+(.*?)\s*(\s+track\s+by\s+(.+)\s*)?$/);
itemName = match[1];
collectionName = match[2];
childCollectionName = attrs["myRepeatChildren"];
parentElement = element.parent();
elements = [];
scope.$watchCollection(collectionName, function(collection) {
var i, block, childScope;
if (elements.length > 0) {
for(i=0; i<elements.length; i++) {
elements[i].el.remove();
elements[i].scope.$destroy();
};
elements = [];
}
var buildHtml = function(parent, itemList, depth=0) {
for (var i=0; i<itemList.length; i++) {
childScope = scope.$new();
childScope[itemName] = itemList[i];
transclude(childScope, function(clone) {
parentElement.append(clone);
block = {};
block.el = clone;
block.scope = childScope;
block.el.addClass("depth-" + depth);
elements.push(block);
});
/*Recurse if this item has children,
adding the sub-elements to the same
parent so we end up with a flat list*/
if(childCollectionName in itemList[i]) {
buildHtml(parentElement,
itemList[i][childCollectionName],
depth+1);
}
}
}
for (i=0; i<collection.length; i++) {
buildHtml(parentElement, collection);
}
});
}
};
});
The second one is a bit hacky. It's also a transcluding repeater. It searches upwards in the DOM for the depth class attribute, parses out the depth value, and prepends itself that many times into the parent. So it's totally dependent on that depth class set by the first directive. There are probably better ways of doing it. I also didn't bother setting up a watch or anything like that since this is purely cosmetic.
myApp.directive("myRepeatPadding", function($parse) {
return {
restrict: "A",
replace: true,
transclude: "element",
terminal: true,
link: function (scope, element, attrs, controller, transclude) {
var getDepth = function(element) {
classes = element.attr("class");
if (classes) {
match = classes.match(/depth-([\d+])/);
if(match.length > 0) {
return match[1];
} else {
return getDepth(element.parent());
}
} else {
return getDepth(element.parent());
}
}
depth = getDepth(element);
for (var i=0; i<depth; i++) {
transclude(scope, function(clone) {
element.parent().prepend(clone);
block = {};
block.el = clone;
block.scope = scope;
elements.push(block);
});
}
}
};
});
It's far from perfect and I'll have to spend some time improving it. I'm not even sure if the HTML I'm producing is the best way to get the appearance I want - but it does render the way I want while keeping the html template looking reasonably elegant.