AngularJS Tree Menu Example for Github　

Basic example.

by ajai jothi

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://ianwalter.github.io/ng-context-menu/dist/ng-context-menu.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
      <div ng-tree="roleList2" config="config" ng-model="test"></div>
  </div>
  <script type="text/ng-template" id="ngTree">
      <ul>
          <li ng-repeat="t in tree" ng-init="t.$collapsed=true" ng-click="Actions.onNodeClick($event, t)" ng-dblclick="Actions.onNodeDblClick($event, t)">
              <span ng-class="{selected:Actions.isSelected(t)}"><i class="fa" ng-class="{'fa-folder-open':(t[config.childrenKey].length && !t.$collapsed),'fa-folder':(t[config.childrenKey].length && t.$collapsed),'fa-clone':!t[config.childrenKey].length}"></i> {{t[config.labelKey]}}
              </span><span class="ngtree-actions" ng-show="Actions.isSelected(t)">
              <a ng-repeat="action in config.actions" ng-click="$event.stopPropagation();action.onClick(t)">
                  <span><i class="{{action.icon}}"></i> {{action.name}}</span>
              </a>
              </span>
              <div ng-show="!t.$collapsed && t[config.childrenKey].length" ng-init="tree=t[config.childrenKey]" ng-include="'ngTree.html'">
              </div>
          </li>
      </ul>
  </script>
</div>

CSS

div[ng-tree] {
    /* prevent user selection */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* default */
    font-family: Tahoma;
    font-size:13px;
    color: #555;
    text-decoration: none;
}
div[ng-tree] ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    overflow: hidden;
}
div[ng-tree] li {
    position: relative;
    padding: 0 0 0 20px;
    line-height: 20px;
}
div[ng-tree] li .expanded {
    padding: 1px 10px;
    background-image: url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD");
    background-repeat: no-repeat;
}
div[ng-tree] li .collapsed {
    padding: 1px 10px;
    background-image: url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB");
    background-repeat: no-repeat;
}
div[ng-tree] li .normal {
    padding: 1px 10px;
    background-image: url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA");
    background-repeat: no-repeat;
}
div[ng-tree] li i, div[ng-tree] li span {
    cursor: pointer;
}
div[ng-tree] li .selected {
    background-color: #4a90e2;
    padding: 1px 3px;
    color: white;
    border-radius: 4px;
}
div[ng-tree] .fa-folder, div[ng-tree] .fa-folder-open {
    color:orange;
}

div[ng-tree] .ngtree-actions{
    margin-left:10px;
}

JavaScript

(function () {

    //angular module
    var myApp = angular.module('myApp', []);

    myApp.run(function ($templateCache) {
        $templateCache.put('ngTree.html', angular.element('#ngTree').html());
    });

    //test controller
    myApp.controller('myController', function ($scope) {
        //test tree model 2
        $scope.roleList2 = [{
            label: 'Plate',
            value: 'Plate',
            children: [{
                label: '800x600',
                value: '800x600',
            }, {
                label: '730x400',
                value: '730x400'
            }]
        }, {
            label: 'Lamination Gum',
            value: 'Lamination Gum',
            children: [{
                label: 'Brand gum 1',
                value: 'Brand gum 1'
            }, {
                label: 'Brand gum 2',
                value: 'Brand gum 2'
            }]
        }];

        $scope.config = {
            multiple: true,
            labelKey: 'label',
            valueKey: 'value',
            childrenKey: 'children',
            parentSelectable: false,
            selectAllDecendants: false,
            actions:[{
                name:'',
                icon:'fa fa-pencil',
                onClick: function(item){
                    console.log(item);
                }
            }]
        };
        $scope.test = [
            "800x600",
            "Brand gum 1"];

        //roleList1 to treeview
        $scope.roleList = $scope.roleList1;

    });

    myApp.directive('ngTree', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            templateUrl: "ngTree.html",
            scope: {
                tree: '=ngTree',
                config: '=',
                selectedList: '=ngModel'
            },
            controller: function ($scope) {

            },
            link: function (scope, iElement, iAttr, ngModelCntrl) {
                var DEFAULTS = {
                    KEY: {
     ...