How to handle recursive rendering of data using AngularJS

前端 未结 3 1432
南笙
南笙 2020-12-16 06:52

I have an application that has set of data that has a recursive relationship (a tree view, using recursion.) I\'ve tried several ways to implement this via Angular, none of

相关标签:
3条回答
  • 2020-12-16 07:30

    Try this for a nice clean example

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

    0 讨论(0)
  • 2020-12-16 07:38

    rather than nest your controllers, nest the data and just have the one controller.

    the view is handled by a template that references itself recursively.

    as chadermani has linked to, there are some answers out there.

    here is a fiddle with a great example (not my code)

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

    and the code from the 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: []}];
    }]);
    
    0 讨论(0)
  • 2020-12-16 07:39

    If you are familiarized with batarang tool, it has a treeview of scopes. You can see the source here:

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

    The idea is simple. Using $compile to recursively render that directive for every children it finds until there is no more children to render.

    I saw that same idea for other alternatives, take a look here:

    Is it possible to make a Tree View with Angular?

    0 讨论(0)
提交回复
热议问题