如何使用angularjs指令中的click事件获取树视图的选定节点值

时间:2014-07-09 08:41:17

标签: angularjs treeview

我在angularjs中使用指令概念,使用angularjs中的click事件函数显示树视图的选定节点值。下面是我的示例代码

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

从警报位置的“输出”中显示“管理员”将通过单击“管理”节点显示。但我想在点击事件功能中显示动态选择的节点值。请告诉我如何执行此操作。 感谢

2 个答案:

答案 0 :(得分:3)

为了动态选择我执行的树的节点:

假设您要选择树的第一个(顶部,[0])元素。 所以首先将data-tree-id =“myTreeId”添加到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>

比在控制器中: $scope.roleList1[0].selected = "selected"; $scope.myTreeId.currentNode = $scope.roleList1[0];

答案 1 :(得分:-1)

在Tree.html中:

添加行: data-tree-id="mytree"

修改data-ng-click事件: data-ng-click="selectNode(mytree.currentNode.roleName)"

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