我最近开始研究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
函数的帮助,我不知道怎么做。
谢谢你们!