how to get selected node value for treeview using click event in angularjs directives

Question

i am using directive concept in angularjs to display selected node value for tree view using click event function in angularjs.below is my sample code

Tree.html:

<div
  data-angular-treeview="true"
  data-tree-model="roleList"
  data-node-id="roleId"
   data-node-label="roleName"
   data-node-children="children"
    data-ng-click="selectNode(roleList[1])"
    data-node-children="children">
    </div>

treeviewcontroller.js:

$scope.roleList1 = [
        { "roleName" : "User", "roleId" : "role1", "children" : [
          { "roleName" : "subUser1", "roleId" : "role11", "children" : [] },
          { "roleName" : "subUser2", "roleId" : "role12", "children" : [
            { "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
              { "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
              { "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
            ]}
          ]}
        ]},

        { "roleName" : "Admin", "roleId" : "role2", "children" : [] },

        { "roleName" : "Guest", "roleId" : "role3", "children" : [] }



      ];

Treeview.js:

    scope.selectNode = function(val)
    {
    alert(val.roleName);
    }



output:
user
      subuser1
      subuser1-1
 Admin
     subadmin1

from this output in alert place 'Admin' will be dispalyed by click on Admin node.but i want to display dynamically selected node value in click event function.please suggest me how to do this. Thanks

Ramsesus · Accepted Answer · 2016-03-07 19:25:48Z

3

In order to dynamically select node of the tree I did following:

Let's say you want to select first (top, [0]) element of your tree. so first add data-tree-id="myTreeId" to your HTML:

<div
    data-angular-treeview="true"
    data-tree-model="roleList"
    data-node-id="roleId"
    data-node-label="roleName"
    data-node-children="children"
    data-ng-click="selectNode(roleList[1])"
    data-node-children="children"
    data-tree-id="myTreeId">
</div>

than in Controller: $scope.roleList1[0].selected = "selected"; $scope.myTreeId.currentNode = $scope.roleList1[0];

answered Mar 7, 2016 at 19:25

Ramsesus

736 bronze badges

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

Comments

Jitendra · Accepted Answer · 2014-07-11 07:23:49Z

-1

In Tree.html :

Add line : data-tree-id="mytree"

Modify data-ng-click event : data-ng-click="selectNode(mytree.currentNode.roleName)"

In Treeview.js : scope.selectNode = function(val) { alert(val); }

answered Jul 11, 2014 at 7:23

Jitendra

11 bronze badge

6 Comments

user3819122 Over a year ago

i am doing above changes also but still i am getting undefined value in Treeview.js.

Jitendra Over a year ago

I have created a plunker http://plnkr.co/edit/RuUFemqpouPEFIcBBIXh?p=preview .Please let me know if this what you were looking for

user3819122 Over a year ago

it is working only for using controller but i am using directive then i am getting undefined value in Treeview.js

Jitendra Over a year ago

Can you please provide some plunker

user3819122 Over a year ago

plnkr.co/edit/BVdnb20S6dPwCLsdNioo?p=catalogue so please suggest me how to do this.

|

Collectives™ on Stack Overflow

how to get selected node value for treeview using click event in angularjs directives

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related