angular-tree-widget.min.css and the script file angular-tree-widget.min.js in your application.
'TreeWidget' dependency to your application module.
Just add the following tag into your page: <tree nodes='basicTree'></tree>, and after that the tree will react to any model changes.
$scope.basicTree=[{
name: "Node 1",
children: [{
name: "Node 1.1",
children:[{name:"Node 1.1.1"},{name: "Node 1.1.2"}]
}]},{
name: "Node 2",
children: [{name: "Node 2.1"},{name: "Node 2.2"}]
}]
Sometimes changing the image of a certain node might be required. With the angular tree widget it is as easy as setting the value of a javascript object:
image: "/demo/app/images/pdf.png"
$scope.customTree = [{
name: "My Files",
image: "/demo/app/images/disk.png",
children: [
{ name: "Pro AngularJS", image: "/demo/app/images/pdf.png" },
{ name: "Presentation", image: "/demo/app/images/ppt.png" },
{ name: "Requirements", image: "/demo/app/images/word.png" },
{ name: "TODO list" }]
}];
In case that you want to prevent the node selection, just set the disable property of the model:
disabled: true
$scope.disabledNodes = [{
name: "My Files", disabled: true,
children: [{
name: "Angular books",
children: [
{ name: "Pro AngularJS", image: "/app/images/pdf.png" },
{ name: "AngularJS: Up and Running", image: "/app/images/pdf.png" }, ]
}, {
name: "Work", disabled: true,
children: [
{ name: "Presentation", image: "/app/images/ppt.png", disabled: true },
{ name: "Requirements", image: "/app/images/word.png" },
{ name: "TODO list", disabled: true }]
}]
}];
With each model update (add/remove/rename node) the tree will automaticlay refresh itself.
Add new node under selected node
Remove selected node
Rename selected node
$scope.disabledNodes = [{
name: "My Files", disabled: true,
children: [{
name: "Angular books",
children: [
{ name: "Pro AngularJS", image: "/app/images/pdf.png" },
{ name: "AngularJS: Up and Running", image: "/app/images/pdf.png" }, ]
}, {
name: "Work", disabled: true,
children: [
{ name: "Presentation", image: "/app/images/ppt.png", disabled: true },
{ name: "Requirements", image: "/app/images/word.png" },
{ name: "TODO list", disabled: true }]
}]
}];
The control supports two events:
selection-changed - click on one nodeexpanded-state-changed - click on the expand/collapse arrow
$scope.$on('selection-changed', function (e, node) {
//node - selected node in tree
$scope.selectedNode = node;
});
$scope.$on('expanded-state-changed', function (e, node) {
// node - the node on which the expanded state changed
// to see the current state check the expanded property
//console.log(node.expanded);
$scope.expandedNode = node;
});
The control supports two functions defined in options:
onSelectNode - click on one nodeonExpandNode - click on the expand/collapse arrow
$scope.basicOptions = {
showIcon: true,
onSelectNode : function (node) {
$scope.selectedNode = node;
},
onExpandNode : function (node) {
console.log(node);
$scope.expandedNode = node;
}
}
To enable the advance mode, you have to use the tree option. <tree nodes='treeNodes' options='options'></tree>
options.multipleSelect=trueoptions.showIcon=falseSelected nodes:
{{node.name}}
N/A
To enable the advance mode, you have to use the tree option. <tree nodes='treeNodes' options='options'></tree>
options.multipleSelect='ctrlKey' or 'altKey'Selected nodes:
{{node.name}}
N/A
To enable the label click exapand/collapse set the options.expandOnClick=true
To enable the advance mode, you have to use the tree option. <tree nodes='treeNodes' options='options'></tree>
options.filter={} and bind any other element to this field
Selected nodes:
{{node.name}}
N/A
$scope.options = {
multipleSelect: 'ctrlKey',
showIcon: true,
filter : {}
};