angular js build dynamic tree node on ng click

Question

i have data in json form. data contain 3 fields:

_id
Folder_Name
parent

on page load, I have displayed root node based on whose parent is null. I am getting child nodes of current node on ng click. I want to expand that nodes on click. I am able to achieve this up to first level, after that its not working.

here is my whole code:

https://jsfiddle.net/chirag273/39ossopj/

I do not want to assign all data at beginning. on ng click, I want only child nodes data of the parent.

thanks in advance

Did you try that plugin - ngmodules.org/modules/angular.treeview ? — shershen
– shershen, Commented Mar 2, 2016 at 7:22
Do you want to use your own implementation? Because there are plenty of controls which are already doing this. — Alex Suleap
– Alex Suleap, Commented Mar 2, 2016 at 8:42
see my code jsfiddle.net/chirag273/39ossopj i want to do in this way. all other examples are of we have all data at beginning and recursive json data.but i want to load data on click event. at beginning we have just root nodes data. — chirag
– chirag, Commented Mar 2, 2016 at 9:25
Try: github.com/CodeNashor/awesome-anguar-tree. On Node click, load the additional childs into the current node. should be solve your problem — Eigi
– Eigi, Commented Mar 2, 2016 at 11:03

Jasmin Kurtic · Accepted Answer · 2016-08-07 13:42:05Z

maybe you can solve if you write controller like this, and call function from with ng-init directive. i put example on link

<div ng-controller="AppCtrl" ng-app="myApp">
        <div ng-init="showManu()"></div>  
      <div id="menu"></div>
</div>
       var app = angular.module('myApp', []);
app.controller('AppCtrl', ['$scope','$http','$compile',function ($scope, $http, $compile) {
    $scope.roots = [{
    Folder_Name:'root1',
    _id:'1',
    parent:null
    },{
    Folder_Name:'root2',
    _id:'2',
    parent:null
    },{
    Folder_Name:'newrow',
    _id:'9',
    parent:'1'
    },{
    Folder_Name:'chirag',
    _id:'3',
    parent:'1'
    },{
    Folder_Name:'sumit',
    _id:'4',
    parent:'2'
    },{
    Folder_Name:'vikas',
    _id:'5',
    parent:'4'
    }
    ];


        $scope.showManu = function(){
                    angular.forEach($scope.roots, function(root){
            if(root.parent == null){
                        var myEl = angular.element(document.getElementById('menu'));
        var html = '<ul><li id="'+root._id+'" ><a ng-click="hideShow('+root._id+')">'+root.Folder_Name+'</a></li></ul>';
        var element = $compile(html)($scope);
        myEl.append(element);
            }
          })
          var hideList = [];
          $scope.hideShow = function(id){
                    if(hideList.indexOf(id)==-1){
                            getLi(id);
                    hideList.push(id);
                }
                else{
                 var classHide = document.getElementById(id);
                 var x = classHide.getElementsByTagName("ul")
                console.log(x.length);
                for(var i = x.length; i>=1; i--){
                console.log(i);
                        classHide.removeChild(classHide.childNodes[i]);
                    }
                            hideList.splice(hideList.indexOf(id),1);


                }
            }

          function getLi(root){
            angular.forEach($scope.roots, function(r){
                    if(r.parent == root){
                        var myEl = angular.element(document.getElementById(r.parent));
        var html = '<ul class="'+r.parent+'"><li id="'+r._id+'"><a ng-click="hideShow('+r._id+')">'+r.Folder_Name+'</a></li></ul>';
        var element = $compile(html)($scope);
        myEl.append(element);
                }
            })
          }


            }



}]);

OP pointed out I do not want to assign all data at beginning. on ng click

Collectives™ on Stack Overflow

angular js build dynamic tree node on ng click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related