Question

我最近开始研究angularJS，我正在开发一个树视图，您可以在其中添加和删除节点。到目前为止，我有一个“添加孩子”按钮和一个“编辑孩子”按钮。现在我无法弄清楚如何制作删除按钮。

以下是视图

<div class="button_panel">
        <input type="button" value="EDIT NODE" data-ng-click="mode = 'editNode'" data-ng-disabled="!mytree.currentNode" /> <input type="button" value="ADD CHILD" data-ng-click="mode = 'addChild'" data-ng-disabled="!mytree.currentNode" />

          <div class="input_panel" data-ng-show="mode == 'editNode'">
            <h4>Selected Node</h4>
              <label>ID</label> <input data-ng-model="mytree.currentNode.id" disabled/><br />
              <label>Label</label> <input data-ng-model="mytree.currentNode.label" /><br />
              <label>Descrição</label> <input data-ng-model="temporaryNode.desc" /><br />
              <input type="button" value="DONE" class="done_button" data-ng-click="done()">
          </div>

          <div class="input_panel" data-ng-show="mode == 'addChild'">
            <h4>New Node</h4>
              <label>ID</label> <input data-ng-model="temporaryNode.id" /><br />
              <label>Label</label> <input data-ng-model="temporaryNode.label" /><br />
              <label>Descrição</label> <input data-ng-model="temporaryNode.desc" /><br />
              <input type="button" value="DONE" class="done_button" data-ng-click="addChildDone()">
          </div>

          <div class="input_panel" data-ng-show="mode == 'deleteChild'">
            <h4>Delete Node</h4>
              <input type="button" value="DONE" class="done_button" data-ng-click="deleteChildDone()">
          </div>
      </div>

和控制器

myApp.controller('myController', function($scope){

//temporary node
$scope.temporaryNode = {
    children: []
};

//test tree model
$scope.roleList = [
    { label : "User", id : "role1", children : [
      { label : "subUser1", id : "role11", children : [] },
      { label : "subUser2", id : "role12", children : [
        { label : "subUser2-1", id : "role121", children : [
          { label : "subUser2-1-1", id : "role1211", children : [] },
          { label : "subUser2-1-2", id : "role1212", children : [] }
        ]}
      ]}
    ]},

    { label : "Admin", id : "role2", children : [] },

    { label : "Guest", id : "role3", children : [] }
  ];

  $scope.done = function () {
      /* reset */
      $scope.mytree.currentNode.selected = undefined;
      $scope.mytree.currentNode = undefined;
      $scope.mode = undefined;
  };

  $scope.addChildDone = function () {
      /* add child */
      if( $scope.temporaryNode.id && $scope.temporaryNode.label && $scope.temporaryNode.desc  ) {
          $scope.mytree.currentNode.children.push( angular.copy($scope.temporaryNode) );
      }

      /* reset */
      $scope.temporaryNode.id = "";
      $scope.temporaryNode.label = "";
      $scope.temporaryNode.desc = "";

      $scope.done();
  };

  $scope.removeChildDone = function () {
      /* remove child */
  };
 });

所以我真的需要一些关于如何制作这个removeChildDone函数的帮助，我不知道怎么做。谢谢你们！

如何从列表中删除项目

0 个答案: