TreeView with Angular Directive

Question

I am relatively newer with Angular so please excuse my mistakes, if any. I have to modify and use this treeview directive from NgModules. It's code looks promising but I have to modify it a little bit to add the functionality of add/ delete or modify items.

Plunker

I was previously using jQuery to create my treeview and have accomplished all the relevant tasks. But since I decided to shift to Angular, I have to do it the angular way.

So as far as I could understand this directive uses nested recursive directive to create the tree, which is an efficient way to do it. It works fine, but I would have some 3000-4000 items to show in my treeview. So when I do that with this code it slows down the screen and consumes much memory due to the many watch expressions (5-7 per item).

Plunker

I have tried one time binding in ng-repeat with :: notation. That has helped a lot but now I couldn't implement my add or update methods. Is there any way I could accomplish this?

<li data-ng-repeat="node in ::' + treeModel + '">

Jānis · Accepted Answer · 2016-01-28 14:54:01Z

1

https://plnkr.co/edit/KwnvyslibWd1dmIXxBYU?p=preview

You already had the selected node in the scope, so simply push the new node into it's children array.

$scope.AddNode = function(NewNode)
    {
        NewNode = {"roleName" : NewNode , "roleId" : "role11", "children" : []};
      $scope.mytree.currentNode.children.push(NewNode);
    };

edit: As name suggest - it is one time binding, so adding/removing won't work here. I think it's only normal that browser get's a bit stuck when trying to display such amount of data once. Instead, you could add nodes by bits, say 20 a step. Or you could check out other libraries as well. This one gives you the option to display array of nodes collapsed at first.

edited Jan 28, 2016 at 14:54

answered Jan 28, 2016 at 14:48

Jānis

1,8121 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

geekowls Over a year ago

Thank you for making the edits. Yeah one time binding won't let editing or modifying the array. Also as you said add nodes by bits. I already intended to add the children asynchronously after a user clicks. But say a node has 100 child nodes (which it would have). That would slow down the tree. So that was the issue.

Collectives™ on Stack Overflow

TreeView with Angular Directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related