AngularJS：形成樹結構
[英]AngularJS: Forming a tree structure
問題描述
是否可以在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 ，但是對於我的要求來說太復雜了。 請讓我知道是否有任何第三方庫可以給我一個簡單的樹結構，它可以折疊和展開。
2 個解決方案
解決方案1
0 2015-12-01 11:42:56
請參考angular.treeview ，這可能會幫助您獲得一些想法。
解決方案2
0 已采納 2015-12-01 13:14:50
AngularJS ng-template內部的ng-template用於樹結構
[英]AngularJS ng-template inside ng-template for tree structure
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.