Я создаю веб-приложение, где мне нужно отображать дерево, используя списки. Моя основная структура выглядит следующим образом:
* Node 1
* Node 1.1
* Node 1.1.1
* Node 1.1.1.1
* Node 1.1.2
* Node 1.2
Я пытаюсь найти что-то в angular или bootstrap, которое я могу использовать, чтобы:
- При первом просмотре списка он расширяется до третьего уровня. В моей скрипке я хотел бы увидеть Node 1, Node 1.1, Node 1.1.1, Node 1.1.2 и Node 1.2 (все, кроме 4-го уровня - Node 1.1.1.1 )
- При нажатии на значок стиля списка (а не на имя слова node) Node сворачивает или расширяет
- В идеале, я хотел бы, чтобы значок изменился и зависел от того, будет ли элемент расширен. Стрелка вправо, если есть больше внизу, стрелка вниз, если она уже расширена, и, возможно, обычный элемент списка, если нет дочерних элементов
Я очень новичок в AngularJS и по-прежнему новичок в Bootstrap. Я вижу, что angular имеет функцию аккордеона, которая, похоже, не справляется со всем, в чем я нуждаюсь.
Мне хотелось бы, чтобы какое-то направление было наилучшим образом, прежде чем я закодирую много логики в своем веб-приложении, которое обрабатывает разные случаи. Я думаю, что это должна быть общая проблема, поэтому, возможно, есть что-то готовое, что я могу использовать. Любое руководство будет высоко оценено.
Код 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>
Angular код:
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);
}
}
};
});