我的HTML代码

Question

是否可以在AngularJS中创建树结构，如下图所示？

图片取自网站：jsonviewer.stack.hu

我的HTML代码

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

我的JSON数据

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

}]

我的输出

我已经检查了angular-ui-tree，但这对我的要求来说太复杂了。如果有任何第三方库可以给我一个简单的树结构，可以折叠和扩展，请告诉我。

Answer 1

请参阅angular.treeview，这可能会帮助您了解一些信息。

Answer 2

经过大量的搜索得到了解决方案

查看演示angularjs-tree-view

下载源代码angular-tree-view Source Code

希望这对其他人有所帮助。

AngularJS：形成树结构

我的HTML代码

我的JSON数据

我的输出

2 个答案: