Using Angular Directive to create a customized TreeView

Question

Using Angular Directive to create a customized TreeView

Although I am still relatively new to Angular, I need to make some modifications to a treeview directive that I found on NgModules. The existing code looks promising, but I want to customize it to include the ability to add, delete, or modify items.

You can find my current progress on this project in this Plunker.

Prior to using Angular, I was working with jQuery to create my treeview and had completed all necessary tasks. However, now that I'm transitioning to Angular, I need to approach it differently.

Based on what I've understood so far, this directive uses nested recursive directives to build the tree structure efficiently. Everything works smoothly, but I anticipate having around 3000-4000 items to display in the treeview. When I try to do this using the current code, the screen slows down significantly and there's a high memory consumption due to multiple watch expressions (5-7 per item).

If you'd like to view my code, you can check it out in this Plunker.

I attempted to use one-time binding in ng-repeat with the :: notation, which did improve performance. However, I'm now facing challenges implementing my add or update methods. Is there a solution that would allow me to achieve this?

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

javascript angularjs treeview

Answer 1

Answer №1

Link to code snippet

If you already have the selected node in the scope, all you need to do is push the new node into its children array.

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

edit: This implementation is one-time binding, meaning adding/removing won't work effectively. To avoid browser lag due to displaying a large amount of data at once, consider adding nodes incrementally, such as 20 at a time. Alternatively, explore other libraries like this one, which allows you to display an array of nodes collapsed initially.

Answer 2

Link to code snippet

If you already have the selected node in the scope, all you need to do is push the new node into its children array.

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

edit: This implementation is one-time binding, meaning adding/removing won't work effectively. To avoid browser lag due to displaying a large amount of data at once, consider adding nodes incrementally, such as 20 at a time. Alternatively, explore other libraries like this one, which allows you to display an array of nodes collapsed initially.

Using Angular Directive to create a customized TreeView

Answer №1

Similar questions

Leveraging both Vuex and an Event Bus in your Vue application

"Encountering an issue with AngularJS: Want to use bindToController with a required controller, but

Guide on importing npm packages without TypeScript definitions while still enabling IDE to provide intelligent code completion features

Tips for utilizing the router instance on a different HTML page within the Backbone JS framework

In React production, the use of .map as a function is unavailable

Issue with GLTF Loader Trial: Encountering TypeError when trying to resolve module specifier "three". Invalid references detected; relative references must begin with either "/", "./", or "../"

What are the differences between using the open prop and conditionally rendering a Material-UI Modal component?

Expanding interfaces dynamically in Typescript

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

Deactivate JQuery star rating plugin after user has voted

Ways to verify if element has been loaded through AJAX request

What is the best way to convert a graphql query into a JSON object?

AJAX response from open cart is returning null JSON data

What is limiting me from utilizing the entire Google Calendar feed?

Unable to retrieve input field in protractor testing

Ways to split up array objects in an axios GET request

What causes Vue to only update once when there are two closely timed mutations to reactive data?

Browsersync in Gulp keeps triggering numerous reloads every time a file is changed

Lazy Highcharts and Foundation clash when loading JavaScript

Is it possible to choose several classes with identical names and then trigger a shared function simultaneously?