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