angular treeview- get parent node

Question

I am using angular treeview to build a tree using angularjs. Once I select a node, I want to know the 'parent node' of the selected one.

I don't want to add an attribute named 'parent' in the json data and also don't want to create any array of parent-child key-value pair.
What changes can be done in initial files to get the result?

HTML

<div ng-app="myApp">
  <div ng-controller="myController">

    <div style="display:table-row; width:500px;">
      <div style="display:table-cell; width:250px;">
        <div style="margin:10px 5px 30px 5px; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
          <span><b>First Tree's Selected Node</b> : <br>{{tree01.currentNode.roleName}}</span>
        </div>
      </div>
      <div style="display:table-cell; width:250px;">
        <div style="margin:10px 5px 30px 5px; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
          <span><b>Second Tree's Selected Node</b> : <br>{{tree02.currentNode.roleName}}</span>
        </div>
      </div>
    </div>
    <div style="display:table-row; width:500px;">
      <div style="display:table-cell; width:250px;">

        <!-- FIRST TREE -->
        <div data-angular-treeview="true" data-tree-id="tree01" data-tree-model="roleList1" data-node-id="roleId" data-node-label="roleName" data-node-children="children">
        </div>


      </div>
      <div style="display:table-cell; width:250px;">

        <!-- SECOND TREE -->
        <div data-angular-treeview="true" data-tree-id="tree02" data-tree-model="roleList2" data-node-id="roleId" data-node-label="roleName" data-node-children="children">
        </div>
      </div>
    </div>
  </div>
</div>

Here's the working fiddle

Vinay K · Accepted Answer · 2015-03-20 12:43:28Z

5

Try these changes.

In Markup: (add ng-click attribute)

 <div
    data-angular-treeview="true"
    data-tree-id="tree01"
    data-tree-model="roleList1"
    data-node-id="roleId"
    data-node-label="roleName"
    data-node-children="children" 
    ng-click="printParent($event);">
</div>

In Controller

$scope.printParent = function ($event) {
  var root = $scope;
  var currentScope = angular.element($event.target).scope();
  console.log('selected Node details: ', currentScope.node);
  currentScope = currentScope.$parent;
  console.log('parents::')
  while(currentScope.$id !== root.$id) {
    console.log(currentScope.node);
    currentScope = currentScope.$parent;
  }
}

Working Fiddle

To access the parent in the directive:

Click Handler

scope[treeId].selectNodeLabel = 
    function( selectedNode, selectedNodeScope ){
        if (selectedNodeScope) {
            var parentScope = selectedNodeScope.$parent,
                index,
                targetArray;
            if (parentScope.node) {
                targetArray = parentScope.node.children;
            } else {
                //root node
                targetArray = scope[treeModel];
            }
            // to insert after the index;
            if (targetArray.length) {
                index = targetArray.indexOf(selectedNode);
                console.log('index :: ', index, 'parent::', targetArray);
                if (index !== -1) {
                    //targetArray.splice(index, 0, newNodeToBeAdded)
                }
            }
        }
    }
    // other stuff
}

In Directive template

<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node, this)">{{node.' + nodeLabel + '}}</span>

Working Fiddle

edited Mar 20, 2015 at 12:43

answered Mar 19, 2015 at 14:53

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

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

8 Comments

vedant sali Over a year ago

thank you @Vinay k for your edit and answer. my purpose of getting the parent node was to add a node as a sibling of current selected node.. As your method is written in main controller, m not able to access the parent inside the directive.

Vinay K Over a year ago

In which directive you want to access the parent? Please update your plnkr with your expectations.

vedant sali Over a year ago

can we have access to the parent in the 'selectNodeLabel()' method of this link . As m trying to add a node, it gets added to a different scope and not dynamically rendered in the tree.

Vinay K Over a year ago

@vedants, I have updated the fiddle and the answer, please check it.

Kings Over a year ago

u saved some crucial couple of hours... i must buy you a cup of starbucks coffee

|

Anik Islam Abhi · Accepted Answer · 2015-12-15 04:13:27Z

1

You can simply print parent like this.In MarkUp

 <div
    data-angular-treeview="true"
    data-tree-id="tree01"
    data-tree-model="roleList1"
    data-node-id="roleId"
    data-node-label="roleName"
    data-node-children="children" 
    ng-click="printParent(this)">
 </div>

In Controller

 $scope.printParent = function(item) {
   var parent = item.$modelValue;
   Console.log(parent);
 };

edited Dec 15, 2015 at 4:13

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

answered Nov 16, 2015 at 8:39

Shafi Hossain

535 bronze badges

Collectives™ on Stack Overflow

angular treeview- get parent node

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related