如何使用angularjs动态显示树结构答案

【问题标题】：how to display tree structure dynamically using angularjs如何使用angularjs动态显示树结构
【发布时间】：2014-07-02 20:52:40
【问题描述】：

我想动态显示树结构。我正在使用 angularjs 和指令，但只获取 json 对象。 popupview.js：

    app.directive('treeview', function(TreeService,$http) {
     return {
    scope: {
    griddata:'=',
     },
    restrict: 'AE',
    replace: true,
    templateUrl: 'app/partials/treeviewgrid.html',
    compile: function(cElem, cAttrs) {
     return {
    pre:function(scope, iElement, iAttrs) {
    },
post:function(scope, iElement, iAttrs) {
 scope.roleList = scope.griddata;

controller.js：

 (function(){
     app.controller('myController', function($scope,$http,TreeService){
    $scope.roleList =
[{"roleName":"okm:root","roledId":"okm:root","children":[{"roleName":"my","roledId":"my","children":[{"roleName":"self","roledId":"self","children":[{"roleName":"htmlmenu.html","roledId":"htmlmenu.html","children":[]}]},{"roleName":"100.pdf","roledId":"100.pdf","children":[]},{"roleName":"act.txt","roledId":"act.txt","children":[]}]},{"roleName":"test","roledId":"test","children":[{"roleName":"Administration guide.pdf","roledId":"Administration guide.pdf","children":[]},{"roleName":"Quick Install.pdf","roledId":"Quick Install.pdf","children":[]},{"roleName":"test.docx","roledId":"test.docx","children":[]}]}]}];
      });
    })();

    }
    };
    }
    };
    });

tree.html:

 <!DOCTYPE html>
    <html ng-app="myapp">
    <body ng-controller="myController">
    <treeview griddata="roleList"></treeview>
    </body>
    </html>

从上面的代码输出是：

[{"roleName":"okm:root","roledId":"okm:root","children":[{"roleName":"my","roledId":"my","children":[{"roleName":"self","roledId":"self","children":[{"roleName":"htmlmenu.html","roledId":"htmlmenu.html","children":[]}]},{"roleName":"100.pdf","roledId":"100.pdf","children":[]},{"roleName":"act.txt","roledId":"act.txt","children":[]}]},{"roleName":"test","roledId":"test","children":[{"roleName":"Administration guide.pdf","roledId":"Administration guide.pdf","children":[]},{"roleName":"Quick Install.pdf","roledId":"Quick Install.pdf","children":[]},{"roleName":"test.docx","roledId":"test.docx","children":[]}]}]}];

但预期的输出是：

好的：根我的自己 htmlmenu.html 100.pdf act.txt。

所以请提供有关如何执行此操作的建议。谢谢。

【问题讨论】：

标签： java html angularjs

【解决方案1】：

我建议使用一些像这样的现有组件 https://github.com/eu81273/angular.treeview

示例：

var myApp = angular.module('myApp', ['angularTreeview']);

http://jsfiddle.net/eu81273/8LWUc/

【讨论】：