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=true
options.showIcon=false
Selected 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 : {} };