AngularJS: Forming a tree structure

Question

Is it possible to create a tree structure in AngularJS as shown in the below image?

Image taken from site : jsonviewer.stack.hu

My HTML Code

    <body ng-controller="myCtrl" data-ng-init="init()">
<input type="text" ng-model="queryColumnName">

<div id="treeNav">
    <ul id="tree">
        <li ng-repeat="component in components | filter: queryColumnName" ng-include="'objectTree'"></li>
    </ul>
</div>

<script src="angular.min.js" type="text/javascript"></script>
<script type="text/ng-template" id="objectTree">
    {{ component.ViewName }}
    <ul ng-if="component.ViewComponent">
        <li ng-repeat="component in component.ViewComponent | filter: queryColumnName" ng-include="'objectTree'">
        </li>
    </ul>
</script>

<script type="text/javascript">
    myApp = angular.module('myApp', []);
    myApp.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.init = function () {
            $http.get('data.json').success(function (data) {
                $scope.components = data;
            }).error(function (data) {
                console.log('Error');
            });
        };
    }]);
</script>
</body>

My JSON data

[{
"ViewName": "BASE_VIEW",
"ViewComponent": [{
    "ViewName": "BASE_COMP2",
    "ViewComponent": [{
        "ViewName": "COMP_COMP2",
        "ViewComponent": [{
            "ViewName": "FND_USER",
            "ViewComponent": []
        }]
    }, {
        "ViewName": "EIS_RS_REPORTS",
        "ViewComponent": [{
            "ViewName": "EIS_RS_REPORT_COLUMNS",
            "ViewComponent": []
        }, {
            "ViewName": "EIS_RS_REPORT_COND_HEADERS",
            "ViewComponent": [{
                "ViewName": "EIS_RS_REPORT_COND_DETAILS",
                "ViewComponent": []
            }]
        }, {
            "ViewName": "EIS_RS_REPORT_PARAMETERS",
            "ViewComponent": []
        }, {
            "ViewName": "EIS_RS_VIEWS",
            "ViewComponent": [{
                "ViewName": "EIS_RS_VIEW_COLUMNS",
                "ViewComponent": []
            }]
        }]
    }]
}, {
    "ViewName": "BASE_COMP1",
    "ViewComponent": [{
        "ViewName": "EIS_RS_REPORTS",
        "ViewComponent": [{
            "ViewName": "EIS_RS_REPORT_COLUMNS",
            "ViewComponent": [{

            }]
        }, {
            "ViewName": "EIS_RS_REPORT_COND_HEADERS",
            "ViewComponent": [{
                "ViewName": "EIS_RS_REPORT_COND_DETAILS",
                "ViewComponent": []
            }]
        }, {
            "ViewName": "EIS_RS_REPORT_PARAMETERS",
            "ViewComponent": []
        }, {
            "ViewName": "EIS_RS_VIEWS",
            "ViewComponent": [{
                "ViewName": "EIS_RS_VIEW_COLUMNS",
                "ViewComponent": []
            }]
        }]
    }]
}]

}]

My Output

I have checked angular-ui-tree, but it's too complicated for my requirement. Please let me know if there are any 3rd party libraries which would give me a simple tree structure which has the ability to collapse and expand.

All you need is one directive, and the answer is on stackoverflow — Callum Linington, Dec 01 '15 at 11:14
This is the one [recursive directive](http://stackoverflow.com/questions/14430655/recursion-in-angular-directives), all you need to do is modify the template in the accepted answer and bobs your uncle — Callum Linington, Dec 01 '15 at 11:14
@CallumLinington i got the tree structure woking. I wanted a proper UI as i have shown in the first image. — Sukesh Kotian, Dec 01 '15 at 11:19

score 0 · Answer 1 · answered Dec 01 '15 at 11:42

0

please refer angular.treeview which might help you to get some idea.

answered Dec 01 '15 at 11:42

Hardik Patel

3,868
1
23
37

the link you provided looks great. But, have you come across the one i have given in the first image. It has dotted lines. – Sukesh Kotian Dec 01 '15 at 12:00

score 0 · Accepted Answer · answered Dec 01 '15 at 13:14

0

After lot of searching got a solution

Check the demo angularjs-tree-view

Download source code angular-tree-view Source Code

Hope this will be helpful for others.

answered Dec 01 '15 at 13:14

Sukesh Kotian

76
1
13

AngularJS: Forming a tree structure

My HTML Code

My JSON data

My Output

2 Answers2