Wie behandeln rekursive rendering der Daten mit AngularJS

Ich habe eine Anwendung, die hat eine Menge der Daten, die eine rekursive Beziehung (eine Baum-Ansicht, mit Rekursion.) Ich habe versucht, mehrere Möglichkeiten, um dies zu implementieren, die über Winkel -, keiner von denen scheint das Rendern einer tragfähigen Ergebnis.

Die Idee hier ist, dass ich wünschte, diese Daten gerendert mit einer Reihe von verschachtelten Listen, so dass für die zahlreichen (7+) Ebenen der Tiefe. Zur Vereinfachung der Dinge (meine eigentliche Anwendung verwendet Restangular) hab ich gebaut den folgenden plunker:

http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij

Während die "top" - level-Daten werden richtig gerendert wurde (nur der erste Titel) mein Versuch, recurse über verschachtelte Controller scheint zu scheitern kläglich. Die Idee hier ist, dass jedes "Kind" in den Baum gerendert mit eigenen controller, die können dann machen es die Kinder, und so weiter und so weiter. Ich merke, dass verschachtelte Controller vielleicht nicht der "beste" Weg zu gehen, aber nach viel suchen habe ich nicht gefunden eine "bessere" alternative.

Ist es wichtig, dass die resultierende Lösung bewahrt das Konzept der "Verschachtelung" hier (jedes element erscheinen unter seinem übergeordneten element, mit einer leichten Einbuchtung.)

Haben Sie gesehen, gist.github.com/furf/4331090 , stackoverflow.com/questions/15661289/....

InformationsquelleAutor chander | 2013-08-24

  1. 12

    eher als nest Ihre Controller, verschachteln der Daten und nur den einen controller.

    die anzeigen werden durch eine Vorlage, die auf sich selbst rekursiv.

    als chadermani verlinkt hat, gibt es einige Antworten gibt.

    hier ist eine Geige mit einem tollen Beispiel (nicht mein code)

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

    und den code aus dem fiddle

    <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: []}];
}]);
    Ich habe versucht, diese - aber es funktioniert nicht mit aktuellen Versionen von angular (geschrieben wurde es mit einer älteren version.) Ich machte ein JSFiddle mit der neuesten version von Winkel und den gleichen code bei jsfiddle.net/PLRCz - abgesehen davon funktioniert nicht mit angular 1.2, das ist eine nette Lösung!
    funktioniert bei mir mit der aktuellen stabilen Winkel - jsfiddle.net/uXbn6/388
    Danke. Ich habe heruntergestuft, um eine früher in der unstable-Veröffentlichung und es funktioniert. Wie es aussieht ist gebrochen in Eckigen 1.2
    Dies wurde durch einen bug in der release-Kandidat. Ein Upgrade auf eine neuere RC oder 1.2, wenn es tatsächlich veröffentlicht wurde.
    eine Optimierung ist die Verwendung ng-if um zu verhindern, dass die Schaffung ng-repeat für "Blatt" - Knoten, wie ich es Tat, hier.. aktualisierte jsfiddle, die zeigt, was ich meine

    InformationsquelleAutor Anton

  2. 1

    Wenn Sie sind vertraut mit batarang-tool, es hat eine treeview mit den Bereichen. Sehen Sie die Quelle hier:

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

    Die Idee ist einfach. Mit $compile rekursiv Rendern, dass die Richtlinie für alle Kinder, die es findet, bis es keine Kinder mehr zu machen.

    Sah ich die gleiche Idee für andere alternativen, schauen Sie bitte hier:

    Ist es möglich, eine Baum-Ansicht mit den Eckigen?

    InformationsquelleAutor Jesus Rodriguez

  3. -1

    Versuchen, diese für eine schöne, saubere Beispiel

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

    Bitte nicht nur links posten. Nutzen Sie den link zur Unterstützung Ihrer eigenen Antwort.

    InformationsquelleAutor Pankaj Bodani

Schreibe einen Kommentar