angular-tree-widget's Introduction

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 on true if you want to disable the node selection.
set the expanded property on false 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 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.
events:
- 'selection-changed': triggered when a node gets selected;
- 'expanded-state-changed': triggered whenever a node expand state changes.