4

再帰関係 (再帰を使用したツリー ビュー) を持つ一連のデータを持つアプリケーションがあります。Angular を介してこれを実装する方法をいくつか試しましたが、どれも実行可能な結果を​​レンダリングしていないようです。

ここでの考え方は、ネストされたリストのセットを使用してこのデータをレンダリングし、多数の (7+) レベルの深さを可能にすることです。簡単にするために (私の実際のアプリケーションでは Restangular を使用しています)、次のプランカーを作成しました。

http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij

「トップ」レベルのデータは正しくレンダリングされますが (最初のタイトルのみ)、ネストされたコントローラーを使用して再帰しようとすると、惨めに失敗するようです。ここでの考え方は、ツリー内の各「子」が独自のコントローラーを使用してレンダリングされ、そのコントローラーがその子をレンダリングできるということです。ネストされたコントローラーが「最良の」方法ではない可能性があることは認識していますが、多くの検索を行った後、「より良い」代替手段が見つかりませんでした。

結果として得られるソリューションがここで「入れ子」の概念を保持することが重要です (各要素は親要素の下にわずかにインデントされて表示されます)。

4

3 に答える 3

12

コントローラーをネストするのではなく、データをネストして、コントローラーを 1 つだけにします。

ビューは、自身を再帰的に参照するテンプレートによって処理されます。

chadermani がリンクしているように、そこにはいくつかの答えがあります。

ここに素晴らしい例があります（私のコードではありません）

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

そしてフィドルからのコード

<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: []}];
}]);
于 2013-08-24T07:42:07.000 に答える
-1

きれいな例としてこれを試してください

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

于 2014-01-19T17:37:56.533 に答える