AngularJS實現表格數據的編輯,更新和刪除

效果

實現

首先，我們先建立一些數據，當然你可以從你任何地方讀出你的數據

[html] view plain copy

print?

var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.employees =[{id:101, name:'John', phone:'555-1276'},
{id:102, name:'Mary', phone:'800-1233'},
{id:103,name:'Mike', phone:'555-4321'},
{id:104,name:'Adam', phone:'555-5678'},
{id:105,name:'Julie', phone:'555-8765'},
{id:106,name:'Juliette', phone:'555-5678'}];
$scope.showEdit = true;
$scope.master = {};
});

因為我們沒有用到angular的bootstrap.這里，我們可以直接

[html] view plain copy

print?

var app = angular.module('plunker',[]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
<script src="jquery-1.11.0.min.js"></script>
<script src="ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="bootstrap.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="mycss.css" />
</head>
<body ng-controller="MainCtrl">
<h2>Inline Edit</h2>
<table>
<tr>
<th>name</th>
<th>phone</th>
<th></th>
</tr>
<tr ng-repeat="employee in employees">
<td>
<input type="text" id='txt_name_{{employee.id}}' ng-model="employee.name" class="inactive" readonly />
</td>
<td> <input type="text" ng-model="employee.phone" class="inactive" readonly /></td>
<td><edit ng-Model="employee" ng-show="showEdit"><a>Edit</a></edit>
<update ng-Model="employee" ng-show="!showEdit"><a>Update</a></update>
<cancel ng-Model="employee" ng-show="!showEdit"> | <a>Cencel</a></cancel>
| <delete ng-Model="employee"><a>Delete</a></delete>
</td>
</tr>
</table>
</body>
</html>

我們來看其中一個標簽，<edit>,這里呢，我們用ng-Model來綁定employee這個對象。

這里，我們用angular的directive來對著三個標簽進行事件的綁定。

angular的dirctive主要作用于DOM對象，而且他可以對Element Name (比如<edit></edit>) 對應于E:）、Attribute(比如<mytag edit=”express”></mytag> 對應于A、

Comment <!-- my comment –> 對應于M、Class <link class=”mycssclass”></link> 對應于C）。

默認對Attribute （A),

當我們有

app.directiv("edit", function(){

return{

restrict: "E"，

. . . .

}

});

意思是說，我們要找到叫Element=”edit”的DOM對象，這里就是<edit>,

當然你也可以攜程 restrict: “AE”，那意思就是說要找到Element或者attribute = edit的DOM對象

這里你可以隨便對AEMC進行組合。

當你找到之后呢，就要對這個DOM進行操作，對于我們來說，就是對他綁定一個click的事件

[html] view plain copy

print?

app.directive("edit", function(){
return{
restrict: "E",
link: function(scope,element){
element.bind("click",function(e){
alert("I am clicked for editing");
});
}
}
})

這個時候呢，當你點Edit的時候呢，click事件就會觸發(fā)。

再往下呢就是對edit click事件的延伸，我們要得到employee name的inputbox，然后對他進行css的轉換，比如當你click edit后，應該出現inputbox的css的inactive或者active的調整，并且移除readOnly

這里要注意一件事，就是angular.copy，為什么使用angular.copy?這個是為后面的cancel做準備的，當你放棄修改的時候，你希望你的值恢復成原樣，這個時候，對于angularJS來說，是要對model恢復原樣。如何恢復修改之前的model?最簡單的方法就是創(chuàng)建一個$scope.master = {}空的對象，然后在你click edit之后，馬上把還沒改變的model拷貝到這個空的master中去，把master作為一個臨時的存儲對象。

當我們click Edit之后，我們要隱藏Edit,而叫Update | Cancel出現。這個時候$scope.showEdit就用上了，在<edit>，<update>,<cancel>上面都有一個ng-show，這個flag用來指定這個元素是不是要顯示。ng-show=”showEdit”這個值是綁定$scope.showEdit的。