Agular Tree Widget
Light AngularJS tree widget control, without jQuery dependency.
Features
- Reacts at model changes.
- Isolated scope.
- Easy customizable using css.
- Custom icons[or no icons at all].
- Multiple selection.
- Disabled nodes.
Demo
Watch the tree in action on the demo page.
Installation
Download the project.
Load the style and the script in your project:
<script type="text/javascript" src="/angular-tree-widget.min.js"></script> <link rel="stylesheet" type="text/css" href="/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.
Usage
- set the
image
property if you want to use a custom image. - set the
disabled
property ontrue
if you want to disable the node selection. - set the
expanded
property onfalse
if you want the node to be collapsed. - updating the tree is done by updating the model.
options
- add the options attribute to the tree taghtml<tree nodes='treeNodes' options='options'>
:multipleSelect
ontrue
: allows the user to select multiple nodes; default valuefalse
.showIcon
onfalse
: allows the user to hide the icons; default valuetrue
; If no images are provided the tree uses the default icons.expandOnClick
ontrue
: allow the user the expand/collapse a node by clicking on it's label.
- events:
- 'selection-changed': triggered when a node gets selected;
- 'expanded-state-changed': triggered whenever a node expand state changes.
License
The MIT License.
Copyright â“’ 2016 Alex Suleap
See LICENSE