AngularJS：形成树结构
[英]AngularJS: Forming a tree structure
问题描述
Is it possible to create a tree structure in AngularJS as shown in the below image? 
是否可以在AngularJS中创建树结构，如下图所示？
Image taken from site : jsonviewer.stack.hu 图片取自网站： jsonviewer.stack.hu
My HTML Code 我的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>
My JSON data 我的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": []
}]
}]
}]
}]
}] }]
My Output 我的输出
I have checked angular-ui-tree , but it's too complicated for my requirement. 我已经检查了angular-ui-tree ，但是对于我的要求来说太复杂了。 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. 请让我知道是否有任何第三方库可以给我一个简单的树结构，它可以折叠和展开。
2 个解决方案
解决方案1
0 2015-12-01 11:42:56
请参考angular.treeview ，这可能会帮助您获得一些想法。
解决方案2
0 已采纳 2015-12-01 13:14:50
After lot of searching got a solution 经过大量搜索后找到了解决方案
Check the demo angularjs-tree-view 查看演示angularjs-tree-view
Download source code angular-tree-view Source Code 下载源代码angular-tree-view源代码
Hope this will be helpful for others. 希望这对其他人有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.