AngularJS:形成树结构
AngularJS:形成树结构
提问于 2015-12-01 11:13:33
是否可以在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": []
}]
}]
}]
}]}]
我的输出
我已经检查了角用户界面树，但是它对我的需求来说太复杂了。请让我知道，如果有任何第三方图书馆，将给我一个简单的树结构，有能力崩溃和扩展。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-12-01 13:14:50
Stack Overflow用户
发布于 2015-12-01 11:42:56
请参考angular.treeview，这可能有助于您了解一些想法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34018991
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号