🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Light AngularJS tree widget control, without jQuery dependency. The tree widget control is an angular UI component, independent from jQuery, which binds data and reacts to model changes.Features:Reacts at model changes.Isolated scope.Easy customizable using css.Custom icons[or no icons at all].Multiple selection.Disabled nodes.

Plugins

Documentation

Agular Tree Widget

Light AngularJS tree widget control, without jQuery dependency.

ScreenShot

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.

License

The MIT License.

Copyright â“’ 2016 Alex Suleap

See LICENSE


You May Also Like