0

I recently started studying angularJS, and I'm developing a treeview, where you can add and delete nodes. So far I have a "Add Child" button and an "Edit Child" button. And now I can't figure out how to make an delete button.

Here is the view

<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>

And the Controller

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 */
  };
 });

So I really need some help on how to make this removeChildDone function, I have no clue how to do it. Thanks guys!!

Rob
  • 14,746
  • 28
  • 47
  • 65
  • Pass object from view into function then splice it from array as in https://stackoverflow.com/questions/15453979/how-do-i-delete-an-item-or-object-from-an-array-using-ng-click/15454424#15454424 – charlietfl Jan 23 '18 at 23:37
  • Thanks for the answer! I did this: $scope.removeChildDone = function (item) { /* remove child */ var index = $scope.node.children.indexOf(item); $scope.node.children.splice(index, 1); }; But I'm getting this error: angular.js:11500 TypeError: Cannot read property 'children' of undefined. I can't call a node.child but that's how it's in ng-repeat (node in node.child) – Bruno Viana Jan 25 '18 at 01:02
  • might have to pass in the parent node also – charlietfl Jan 25 '18 at 01:05
  • I tried many ways, but nothing is working. – Bruno Viana Jan 25 '18 at 02:33

0 Answers0