Я создаю веб-приложение, в котором мне нужно отобразить дерево, используя списки. Моя основная структура выглядит так:

* Node 1
    * Node 1.1
        * Node 1.1.1
            * Node 1.1.1.1
        * Node 1.1.2
    * Node 1.2

http://jsfiddle.net/QffFm/1/I»

Я пытаюсь найти что-то в angular или bootstrap, что я могу использовать так, чтобы:

При первом просмотре списка он расширяется до третьего уровня. В моей скрипке я хотел бы видеть Узел 1, Узел 1.1, Узел 1.1.1, Узел 1.1.2 и Узел 1.2 (все, кроме 4-го уровня - Узел 1.1.1.1)При нажатии на значок в стиле списка (не имя слова узла) узел сворачивается или разворачиваетсяВ идеале я хотел бы, чтобы значок также менялся в зависимости от того, развернут ли элемент. Стрелка вправо, если внизу больше, стрелка вниз, если она уже развернута, и, возможно, обычный элемент списка, если нет дочерних элементов

Я очень плохо знаком с AngularJS и все еще довольно плохо знаком с Bootstrap. Я вижу, что Angular имеет функцию аккордеона, которая неЯ, кажется, вполне справляюсь со всем, что мне нужно.

Я хотел бы получить какое-то руководство по лучшему подходу, прежде чем я напишу много логики в своем веб-приложении, которое обрабатывает различные случаи. Я думаю, что это должно быть общей проблемой, поэтому, возможно, есть что-то готовое, что я могу использовать. Любое руководство будет высоко ценится.

HTML код:

Угловой код:

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: '',
        restrict: 'E',
        replace: true,
        scope: {
            items: '=items',
        }
    };
});

app.directive('treeNode', function($compile) {
    return { 
        restrict: 'E',
        template: '{{item.name}}',
        link: function(scope, elm, attrs) {
        if (scope.item.items.length > 0) {
            var children = $compile('')(scope);
            elm.append(children);
        }
    }
    };
});