0

HTML code 

 I have html code as below which renders folders with children folders, 
 when down arrow is clicked then the children will be displayed 
 
 <ul update-root-folders folders="vm.folders">
    <li ng-repeat="folder in vm.folders" ng-init="folder.childFolders = 
      vm.getChildrenFodlers(fodler.child_folderIds)">
     <div ng-show="vm.shouldShowChildren[folder.id]" ng-
             click="vm.shouldShowChildren[folder.id] != 
           vm.shouldShowChildren[folder.id]">right arrow</div>
     <div ng-show="!vm.shouldShowChildren[folder.id]" ng-
             click="vm.shouldShowChildren[folder.id] != 
           vm.shouldShowChildren[folder.id]">down arrow</div>
     </li>`
     <ul ng-show="vm.shouldShowChildren[folder.id]">
       <li ng-repeat="childFolder in vm.childFolders" ng-
                  init="childFolder.childFolders = 
             vm.getChildrenFodlers(childFolder.child_folderIds)">
       </li>
     </ul>
   </ul>


 Here dynamically childFolders is getting added to each fodler or each 
 child fodlers. So I had to do update the vm.folders in one scenario in 
 update-root-fodlers directive as below.
Directive Code 
 scope.$on('updateRootFolderIterations', function(event, data){
                console.log(scope.folders);
                console.log(data);
                var iterations = scope.iterations;
                if(data.isFolderDroppedInRoot) {
                    scope.folders = [];
                    var iterationContent = angular.fromJson($window.localStorage.getItem('folders'));
                    if(data.newFolder) {
                        data.newFolder.forEach(function(iteration) {
                             var droppedRootFolder = iterationContent.filter(function(item) {
                                return item._id === iteration.id;
                              });
                              if(droppedRootFolder.length > 0) {
                                 scope.iterations.push(droppedRootFolder[0]);
                              }
                        });
                    }
                } 
                else {
                    var indexOfMovedFolder = scope.iterations.findIndex(function(iteration, index) {
                        return iteration._id === data.newFolder[0].id;
                    });
                    if(indexOfMovedFolder > -1) {
                        scope.iterations.splice(indexOfMovedFolder, 1);
                    }
                }
                scope.$apply();
            });


 
 During page load everything working, But based on some user action the 
 event will be broadcasted then the folders are getting assigned with 
 new folder content, here the ng-repeat rendering new fodlers but 
 not able to get the children while ng-repeat is rendering.
 How to load the children (infinite depth is possible) here. Any better 
 -way of creating children object into each folder while ng-repeat is 
 happening. And which should update/get children when we do scope.$apply()
jithu reddy
  • 849
  • 1
  • 10
  • 19
  • Its not related to your question but might be helpful: http://stackoverflow.com/questions/19691917/how-do-display-a-collapsible-tree-in-angularjs-bootstrap/19692791#19692791 – Maxim Shoustin Apr 13 '17 at 12:19
  • I wrote an angular service which takes folder as input and checks the child container id length, get the each child folder and push it to children object of the folder, this will be executed recursively. This will be executed during page load and as and user do some action on the folders like adding new folders etc. I got rid of the ng-init which is also creating issues like "10 $digest() iterations reached. aborting" because while ng-repeat is happening the item/model getting updated in a infinite loop. – jithu reddy Apr 13 '17 at 13:50

0 Answers0