Light AngularJS tree widget control, without jQuery dependency.
Watch the tree in action on the demo page.
Download the project.
Load the style and the script in your project:
<script type="text/javascript" src="https://github.com/AlexSuleap/angular-tree-widget/raw/master/angular-tree-widget.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://github.com/AlexSuleap/angular-tree-widget/blob/master/angular-tree-widget.min.css">
Add a dependency to your application module.
angular.module('myApp', ['TreeWidget']);
Add data for the tree
$scope.treeNodes =[{
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"}
]
}];
Add the tree tag to your application.
<tree nodes='treeNodes'>
Do not forget to add AngularJS, AngularJS.Animate and Angular Recursion references to your project.
image
property if you want to use a custom image.disabled
property on true
if you want to disable the node selection.expanded
property on false
if you want the node to be collapsed.options
- add the options attribute to the tree tag html<tree nodes='treeNodes' options='options'>
:
multipleSelect
on true
: allows the user to select multiple nodes; default value false
.showIcon
on false
: allows the user to hide the icons; default value true
; If no images are provided the tree uses the default icons.expandOnClick
on true
: allow the user the expand/collapse a node by clicking on it's label.The MIT License.
Copyright ⓒ 2016 Alex Suleap
See LICENSE