Comment gérer récursive rendu de données à l'aide d'AngularJS

J'ai une application qui a un ensemble de données qui ont une relation récursive (un arbre, en utilisant la récursivité.) J'ai essayé plusieurs façons de mettre en œuvre cette via Angulaire, aucun de qui semblent rendre viable résultat.

L'idée ici est que je veux avoir ces données rendu à l'aide d'un ensemble de listes imbriquées, ce qui permet pour de nombreux (7+), les niveaux de profondeur. Pour simplifier les choses (mon application utilise Restangular) j'ai construit le suivant plunker:

http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij

Tandis que le "haut" niveau de données s'affiche correctement (juste le premier titre), ma tentative de répéter utilisant des contrôleurs semble échouer lamentablement. L'idée ici est que chaque "enfant" dans l'arbre est rendu à l'aide de son propre contrôleur, qui peut alors rendre les enfants, et ainsi de suite et ainsi de suite. Je me rends compte que imbriqués les contrôleurs pourrait ne pas être la "meilleure" façon d'aller, mais après beaucoup de recherches je n'ai pas trouvé une "meilleure" solution de rechange.

Il est important que la solution préserve le concept de "nidification" ici (chaque élément apparaissant en dessous de son élément parent, avec un léger retrait.)

Avez-vous vu ce gist.github.com/furf/4331090 , stackoverflow.com/questions/15661289/....

OriginalL'auteur chander | 2013-08-24

  1. 12

    plutôt que nest vos contrôleurs, nest les données et avoir un contrôleur.

    la vue est gérée par un modèle qui fait référence à lui-même de manière récursive.

    comme chadermani a liés à, il ya quelques réponses.

    ici est un violon avec un excellent exemple (pas mon code)

    http://jsfiddle.net/brendanowen/uXbn6/8/

    et le code de la tripoter

    <script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({name: newName,nodes: []});
    };
    $scope.tree = [{name: "Node", nodes: []}];
}]);
    J'ai essayé ceci mais ça ne fonctionne pas avec les versions actuelles de angulaire (il a été écrit avec une version plus ancienne.) J'ai fait un JSFiddle à l'aide de la dernière version de coudé, et le même code dans le jsfiddle.net/PLRCz - de plus il ne fonctionne pas avec angulaire 1.2, c'est une bonne solution!
    fonctionne pour moi avec la dernière version stable angulaire jsfiddle.net/uXbn6/388
    Merci. J'ai rétrogradé en plus tôt unstable et il fonctionne. On dirait qu'il est cassé dans Angulaire 1.2
    Cela était dû à un bug dans la version release candidate. La mise à niveau vers une version plus récente de RC ou 1.2 si elle a été effectivement libéré.
    une optimisation est d'utiliser ng-if pour empêcher la création de ng-repeat pour "feuille" nœuds comme je l'ai fait ici.. mis à jour jsfiddle qui montre ce que je veux dire

    OriginalL'auteur Anton

  2. 1

    Si vous êtes familiarisé avec le batarang de l'outil, il a un treeview des étendues. Vous pouvez voir le code source ici:

    https://github.com/angular/angularjs-batarang/blob/master/js/directives/scopeTree.js

    L'idée est simple. À l'aide de $compiler récursive de rendre cette directive pour tous les enfants, il trouve jusqu'à ce qu'il n'y a pas plus d'enfants à rendre.

    J'ai vu que la même idée pour d'autres alternatives, prendre un coup d'oeil ici:

    Est-il possible de faire une Arborescence Angulaire?

    OriginalL'auteur Jesus Rodriguez

  3. -1

    Essayez ceci pour un bien propre exemple

    http://codrspace.com/build80/create-recursive-tree-structure-using-template-in-angularjs/

    Merci de ne pas poster des liens. Utilisez le lien à l'appui de votre propre réponse.

    OriginalL'auteur Pankaj Bodani