I am building a web app where I need to display a tree using lists. My basic structure looks like this:
* Node 1
* Node 1.1
* Node 1.1.1
* Node 1.1.1.1
* Node 1.1.2
* Node 1.2
http://jsfiddle.net/QffFm/1/
I'm trying to find something in angular or bootstrap that I can use such that:
I am very new to AngularJS and still quite new to Bootstrap as well. I see that Angular has an accordion function which doesn't seem to quite handle everything I need it to.
I would love some direction on the best approach before I code a lot of logic into my web app that handles the different cases. I think this must be a common problem so perhaps there is something ready made that I can utilize. Any guidance would be much appreciated.
HTML code:
<div ng-app="myApp" ng-controller="controller">
<my-directive></my-directive>
<table style="width: 100%"><tbody><td>
<tree items="tree"></tree>
</td></tbody></table>
</div>
Angular code:
var app = angular.module('myApp', []);
app.controller('controller', function ($scope){
$scope.tree=[{"name":"Node 1","items":[{"name":"Node 1.1","items":[{"name":"Node 1.1.1","items":[{"name":"Node 1.1.1.1","items":[]}]},{"name":"Node 1.1.2","items":[]}]},{"name":"Node 1.2","items":[]}]}];
});
app.directive('tree', function() {
return {
template: '<ul><tree-node ng-repeat="item in items"></tree-node></ul>',
restrict: 'E',
replace: true,
scope: {
items: '=items',
}
};
});
app.directive('treeNode', function($compile) {
return {
restrict: 'E',
template: '<li >{{item.name}}</li>',
link: function(scope, elm, attrs) {
if (scope.item.items.length > 0) {
var children = $compile('<tree items="item.items"></tree>')(scope);
elm.append(children);
}
}
};
});
In followed example I used:
ng-include
or (see second example) recursive directivesng-include
) Plunker
From this model:
$scope.displayTree =
[{
"name": "Root",
"type_name": "Node",
"show": true,
"nodes": [{
"name": "Loose",
"group_name": "Node-1",
"show": true,
"nodes": [{
"name": "Node-1-1",
"device_name": "Node-1-1",
"show": true,
"nodes": []
}, {
"name": "Node-1-2",
"device_name": "Node-1-2",
"show": true,
"nodes": []
}, {
"name": "Node-1-3",
"device_name": "Node-1-3",
"show": true,
"nodes": []
}]
}, {
"name": "God",
"group_name": "Node-2",
"show": true,
"nodes": [{
"name": "Vadar",
"device_name": "Node-2-1",
"show": true,
"nodes": []
}]
}, {
"name": "Borg",
"group_name": "Node-3",
"show": true,
"nodes": []
}, {
"name": "Fess",
"group_name": "Node-4",
"show": true,
"nodes": []
}]
}];
[{
"name": "Android",
"type_name": "Android",
"icon": "icon-android icon-3",
"show": true,
"nodes": []
}];
}
app.directive('nodeTree', function() {
return {
template: '<node ng-repeat="node in tree"></node>',
replace: true,
transclude: true,
restrict: 'E',
scope: {
tree: '=ngModel'
}
};
});
app.directive('node', function($compile) {
return {
restrict: 'E',
replace:true,
templateUrl: 'the-tree.html',
link: function(scope, elm, attrs) {
// ....
if (scope.node.children.length > 0) {
var childNode = $compile('<ul ><node-tree ng-model="node.children"></node-tree></ul>')(scope)
elm.append(childNode);
}
}
};
});
(Added some checkboxes as well :))
Demo 2 Plunker
How it looks:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With