Comment afficher un réductible arbre dans AngularJS + Bootstrap

Je suis la construction d'une application web où j'ai besoin d'afficher un arbre à l'aide de listes. Ma structure de base ressemble à ceci:

* 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/

J'essaie de trouver quelque chose dans angulaire ou bootstrap que je peux utiliser, tels que:

• À première vue, de la liste, il est étendu jusqu'à la troisième couche. Dans mon violon, je voudrais voir le Nœud 1 Nœud 1.1, Nœud 1.1.1, Nœud 1.1.2 et Nœud 1.2 (tous sauf le 4ème couche - Nœud 1.1.1.1)
• En cliquant sur la liste de style de l'icône (pas le mot nom du nœud, Le nœud s'effondre ou se dilate
• Idéalement, j'aimerais pour l'icône de changement dépend aussi si l'élément est développé. Une flèche vers la droite si il n'y a plus de sous, une flèche vers le bas si elle est déjà développée, et peut-être un élément de liste standard si il n'y a pas d'enfants

Je suis très nouveau à AngularJS et encore assez de Bootstrap. Je vois que Angulaire a un accordéon fonction qui ne semble pas tout à fait tout gérer, j'en ai besoin.

J'aimerais quelques conseils sur la meilleure approche avant que je code beaucoup de logique dans mon application web qui gère les différents cas. Je pense que ce doit être un problème commun peut-être, il est quelque chose de prêt fait que je peux utiliser. Des conseils seront très appréciés.

Code 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>

Angulaire code:

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);
        }
    }
    };
});

OriginalL'auteur Korra | 2013-10-30