Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="main">
<tree tree-model="data"></tree>
</body>
</html>
 
​
 
var app = angular.module('myapp', []);
app.controller('main', function($scope) {
    $scope.treeOptions = {
        nodeChildren: "hierarchies",
        dirSelectable: true,
        injectClasses: {
            ul: "a1",
            li: "a2",
            liSelected: "a7",
            iExpanded: "a3",
            iCollapsed: "a4",
            iLeaf: "a5",
            label: "a6",
            labelSelected: "a8"
        }
    }
    // $scope.dataForTheTree = [{
    //     uniqueName: "[Account]",
    //     hierarchies: [{
    //         dimensionUniqueName: "[Account]",
    //         levels: [{
    //             id: "0",
    //             uniqueName: "[Account].[Account Number].[(All)]",
    //         }]
    //     }]
    // }]
   $scope.data = [{
        name:'HELLO ROOT',
        hierarchies:[{
            name:'HELLO hierarchies',
            levels:[
                {
                    name:'HELLO LEVEL'
                }
            ]   
        },
        {
            name:'HELLO hierarchies 2',
            levels:[
                {
                    name:'HELLO LEVEL'
                },
                {
                    name:'HELLO LEVEL 2'
                }
            ]   
        }]
    }];
    // $scope.dataForTheTree = [{
    //     "name": "Joe",
    //     "age": "21",
    //     "hierarchies": [{
    //         "name": "Smith",
    //         "age": "42",
    //         "levels": []
    //     }, {
    //         "name": "Gary",
    //         "age": "21",
    //         "hierarchies": [{
    //             "name": "Jenifer",
    //             "age": "23",
    //             "hierarchies": [{
    //                 "name": "Dani",
    //                 "age": "32",
    //                 "hierarchies": []
    //             }, {
    //                 "name": "Max",
    //                 "age": "34",
    //                 "hierarchies": []
    //             }]
    //         }]
    //     }]
    // }, {
    //     "name": "Albert",
    //     "age": "33",
    //     "hierarchies": []
    // }, {
    //     "name": "Ron",
    //     "age": "29",
    //     "hierarchies": []
    // }];
});
​
​
app.directive('tree', [function () {
    return {
        scope:{
            treeModel:'='
        },
        restrict: 'AE',
        template:'<ul><li ng-repeat="root in treeModel">{{root.name}}'+
        '<ul><li ng-repeat="h in root.hierarchies"><hierarchey hierarchey-model="h"></hierarchey></li></ul>'
        +'</li><ul>'
    };
}]);
app.directive('hierarchey', [function () {
    return {
        scope:{
            isExpand:false
        },
        controller:function($scope){
            $scope.hierarchyOp = function(){
                alert("IM CLIKED");
            }
        },
        restrict: 'AE',
        template:'<span ng-click="hierarchyOp()"><i ng-show="isExpand" class="fa fa-folder-open"></i><i ng-hide="isExpand" class="fa fa-folder-open"></i>{{h.name}}</span>'
    };
}])
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers