Question

使用angular.treeview.js，我想在单击父项或子项时弹出警报，同时打开树结构。单击子项时，显示展开的树，但也显示已单击的节点的警报。

http://plnkr.co/edit/RuUFemqpouPEFIcBBIXh?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script src="script.js"></script>
    <script src="angular-treeview.js"></script>
  </head>

  <body ng-app="demo">
  <div ng-controller='AngularTree'>
    <div
      data-angular-treeview="true"
      data-tree-id="mytree"
        data-tree-model="roleList1"
        data-node-id="roleId"
      data-node-label="roleName"
            data-ng-click="selectNode(mytree.currentNode.roleName)"
      data-node-children="children">
    </div>
  </div>

  </body>

</html>

Answer 1

可能的解决方案......

＆＃13;

var app = angular.module('demo', ['angularTreeview']);
app.controller("AngularTree", function($scope) {

  $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": []
    }

  ];

  $scope.selectNode = function(currentNode) {
    $scope.trace = "clicked " + currentNode.roleName;
    $scope.trace += "\nchildren: " + currentNode.children.length;
    // here trying to expand tree on click
    if (currentNode.collapsed) 
     currentNode.collapsed = false;
    else
      currentNode.collapsed = true;
    alert($scope.trace);
  }
});

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script src="https://rawgit.com/eu81273/angular.treeview/master/angular.treeview.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/eu81273/angular.treeview/master/css/angular.treeview.css">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-app="demo">
  <div ng-controller='AngularTree'>
    <div
      data-angular-treeview="true"
      data-tree-id="mytree"
     	data-tree-model="roleList1"
     	data-node-id="roleId"
      data-node-label="roleName"
			data-ng-click="selectNode(mytree.currentNode)"
      data-node-children="children">
    </div>
    <pre>trace: {{trace}}</pre>
  </div>
    
  </body>

</html>

＆＃13;

选择树元素并打开树时打开弹出窗口

1 个答案: