Блог

Главная - Вопросы по программированию - как динамически отображать древовидную структуру с помощью angularjs

как динамически отображать древовидную структуру с помощью angularjs

#java #html #angularjs

#java #HTML #angularjs

Вопрос:

я хочу динамически отображать древовидную структуру.я использую 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 .

поэтому, пожалуйста, предложите, как это сделать. Спасибо.

Ответ №1:

Я предлагаю использовать некоторые из существующих компонентов, подобных этомуhttps://github.com/eu81273/angular.treeview

введите описание изображения здесь

пример:

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

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