Question

我想动态显示树结构。我正在使用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":[]}]}]}];

但预计出局是：

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

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

Answer 1

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

enter image description here

示例：

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

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

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

1 个答案: