角js在ng點擊動態樹節點

Question

我有JSON格式的數據。數據包含3個字段：基於其父爲空

1. _id
2. FOLDER_NAME
3. 父

在頁面加載，我已經顯示根節點。點擊即可獲取當前節點的子節點。我想在點擊時展開這些節點。我能夠達到這個水平達到第一級，之後它不能正常工作。

here is my whole code: 

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

我不想在一開始分配的所有數據。單擊時，我只需要父級的子節點數據。

在此先感謝

Answer 1

也許如果你寫控制器這樣就可以解決，並從NG-初始化指令調用函數。我舉例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); 
       } 
      }) 
      } 


      } 



}]);