我正在构建一个网络应用程序，我需要在其中使用列表显示一棵树。我的基本结构是这样的：
* Node 1
* Node 1.1
* Node 1.1.1
* Node 1.1.1.1
* Node 1.1.2
* Node 1.2
我试图在 angular 或 bootstrap 中找到一些我可以使用的东西：
- 在列表的第一个视图中，它被扩展到第三层。在我的小提琴中，我想看到节点 1、节点 1.1、节点 1.1.1、节点 1.1.2 和节点 1.2（除了第 4 层 - 节点 1.1.1.1）
- 单击列表样式图标（不是节点的单词名称）时，节点会折叠或展开
- 理想情况下，我希望图标也能根据项目是否展开而改变。如果下面有更多，则为右箭头，如果已展开则为向下箭头，如果没有子项，则可能是常规列表项
我对 AngularJS 很陌生，对 Bootstrap 也很陌生。我看到 Angular 有一个手风琴功能，它似乎不能完全处理我需要的一切。
在我将大量逻辑编码到处理不同情况的 Web 应用程序中之前，我希望获得有关最佳方法的一些指导。我认为这一定是一个常见问题，所以也许有一些现成的东西可以使用。任何指导将不胜感激。
HTML代码：
<div ng-app="myApp" ng-controller="controller">
<my-directive></my-directive>
<table style="width: 100%"><tbody><td>
<tree items="tree"></tree>
</td></tbody></table>
</div>
角度代码：
var app = angular.module('myApp', []);
app.controller('controller', function ($scope){
$scope.tree=[{"name":"Node 1","items":[{"name":"Node 1.1","items":[{"name":"Node 1.1.1","items":[{"name":"Node 1.1.1.1","items":[]}]},{"name":"Node 1.1.2","items":[]}]},{"name":"Node 1.2","items":[]}]}];
});
app.directive('tree', function() {
return {
template: '<ul><tree-node ng-repeat="item in items"></tree-node></ul>',
restrict: 'E',
replace: true,
scope: {
items: '=items',
}
};
});
app.directive('treeNode', function($compile) {
return {
restrict: 'E',
template: '<li >{{item.name}}</li>',
link: function(scope, elm, attrs) {
if (scope.item.items.length > 0) {
var children = $compile('<tree items="item.items"></tree>')(scope);
elm.append(children);
}
}
};
});
