How to clone node in Angular UI tree?

Question

How to clone node in Angular UI tree with all children?

Now I use event click: ng-click="newSubItem(this)" where newSubItem is function:

$scope.newSubItem = function (scope) {

                var nodeData = scope.$modelValue;
                var arrr_nodes = [];

                angular.forEach(nodeData.nodes, function (value) {
                    arrr_nodes.push(arrr_nodes);
                });

                var total_nodes = nodeData.nodes.length;
                var prefix_increment = total_nodes + 1;

                nodeData.nodes.push({
                    id: nodeData.id + prefix_increment,
                    prefix: nodeData.prefix + "_" + prefix_increment,
                    title: nodeData.title + '.' + (nodeData.nodes.length + 1),
                    value: nodeData.value,
                    type: nodeData.type,
                    nodes: arrr_nodes
                });
            };

When I try to insert all children from cloned object to new nodes: nodes: arrr_nodes it gives a lot of errors and breaks tree.

Can you explain me, why input field in example is working, but by me is not? — Oleg
– Oleg, Commented Jun 11, 2017 at 22:11
Angular.copy makes a deep clone of the object, it looks like your code is just copying in references to the original arr_nodes. — Daniel Beck
– Daniel Beck, Commented Jun 12, 2017 at 10:43

Daniel Beck · Accepted Answer · 2017-06-12 12:03:57Z

I'm not entirely clear on what you're trying to do inside that newSubItem function -- it doesn't return anything, so it's not obvious what the purpose is.

But you're not cloning objects, instead you're

copying object references (nodeData is just a reference to scope.$modelValue, so if the modelValue changes later on so will nodeData) and
creating circular data structures (by pushing the array onto itself, arrr_nodes.push(arrr_nodes);),

neither of which is probably what you want.

To answer your stated question, if you're trying to make a deep clone of an object, Angular provides angular.copy() which does exactly that. If your intent is for nodeData to be a clone of the modelValue, all you need is

$scope.newSubItem = function (scope) {
    var nodeData = angular.copy(scope.$modelValue);
    // presumably now you would do something useful with nodeData
}

Collectives™ on Stack Overflow

How to clone node in Angular UI tree?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related