In this tutorial I am going to share simple AngularJS directive to create tree menu. You must have seen tree menu on many control panel where you have to create nested menu – submenu – submenu and so on. These nested tree structure helps to associate list of submenu with parent menu.
ScreenShot

Libraries

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

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

Add a dependency to your application module.

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

You can use following attribute to customize tree menu.

  • 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.

HTML

Here is a simple example.

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



Here is the tree menu structure.

$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" : [] }
];

JS

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);

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by eu81273, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.