Angular Treeview

Pure AngularJS based tree menu directive.

Installation

Copy the script and css into your project and add a script and link tag to your page.

<scripttype="text/javascript" src="/angular.treeview.js"></script><linkrel="stylesheet" type="text/css" href="css/angular.treeview.css">

Add a dependency to your application module.

angular.module('myApp',['angularTreeview']);

Add a tree to your application. See Usage.

Usage

Attributes of angular treeview are below.

• angular-treeview: the treeview directive.
• tree-id : each tree's unique id.
• tree-model : the tree model on $scope.
• node-id : each node's id.
• node-label : each node's label.
• node-children: each node's children.

Here is a simple example.

<divdata-angular-treeview="true"
data-tree-id="abc"
data-tree-model="treedata"
data-node-id="id"
data-node-label="label"
data-node-children="children" ></div>

Example model:

$scope.treedata=[{"label" : "User","id" : "role1","children" : [{"label" : "subUser1","id" : "role11","children" : []},{"label" : "subUser2","id" : "role12","children" : [{"label" : "subUser2-1","id" : "role121","children" : [{"label" : "subUser2-1-1","id" : "role1211","children" : []},{"label" : "subUser2-1-2","id" : "role1212","children" : []}]}]}]},{"label" : "Admin","id" : "role2","children" : []},{"label" : "Guest","id" : "role3","children" : []}];

Selection

If tree node is selected, then that selected tree node is saved to $scope."TREE ID".currentNode. By using $watch, the controller can recognize the tree selection.

$scope.$watch('abc.currentNode',function(newObj,oldObj){if($scope.abc&&angular.isObject($scope.abc.currentNode)){console.log('Node Selected!!');console.log($scope.abc.currentNode);}},false);

Examples

Basic example

jsFiddle - http://jsfiddle.net/eu81273/8LWUc/

Multiple treeview example

jsFiddle - http://jsfiddle.net/eu81273/b9Pnw/

Browser Compatibility

Same with AngularJS. Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

Changelogs

version 0.1.6

• Fixed the bug that 'null' string appears before each 'div' generated. (Thanks to Iaac)

version 0.1.5

• support multiple treeview. (Thanks to Axel Pesme)

version 0.1.4

• prevented memory leaks.

version 0.1.3

• removed unnecessary codes.

version 0.1.2

• removed some jQuery dependency. (Issue #2)

License

The MIT License.

Copyright ⓒ 2013 AHN JAE-HA.

See LICENSE