AngularJS進階(十一)AngularJS實現表格資料的編輯,更新和刪除
也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!
AngularJS實現表格資料的編輯,更新和刪除
效果
實現
首先,我們先建立一些資料,當然你可以從你任何地方讀出你的資料
- 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.
- 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="[email protected]" 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>
- <!--<input id="test" value="ddd"/>-->
- <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的事件
- app.directive("edit", function(){
- return{
- restrict: "E",
- link: function(scope,element){
- element.bind("click",function(e){
- alert("I am clicked for editing");
- });
- }
- }
- })
這個時候呢,當你點Edit的時候呢,click事件就會觸發。
再往下呢就是對edit click事件的延伸,我們要得到employee name的inputbox,然後對他進行css的轉換,比如當你click edit後,應該出現inputbox的css的inactive或者active的調整,並且移除readOnly
這裡要注意一件事,就是angular.copy,為什麼使用angular.copy?這個是為後面的cancel做準備的,當你放棄修改的時候,你希望你的值恢復成原樣,這個時候,對於angularJS來說,是要對model恢復原樣。如何恢復修改之前的model?最簡單的方法就是建立一個$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的。
- app.directive("edit", function(){
- return{
- restrict: "E",
- link: function(scope,element){
- element.bind("click",function(e){
- alert("I am clicked for editing");
- });
- }
- }
- })
下面,我們要給Update做事件的繫結。這裡就沒用什麼可說的了。
- app.directive("update",function($document){
- return{
- restrict: 'AE',
- require: 'ngModel',
- link: function(scope,element,attrs,ngModel){
- element.bind("click",function(){
- alert(ngModel.$modelValue + " is updated, Update your value here.");
- var id = "txt_name_" +ngModel.$modelValue.id;
- var obj = $("#"+id);
- obj.removeClass("active");
- obj.addClass("inactive");
- obj.attr("readOnly",true);
- scope.$apply(function(){
- scope.showEdit = true;
- })
- })
- }
- }
- })
在下面就是Cancel了,上面說過了,Cancel的時候要還原之前的值,這個時候呢,我們就用angular.copy把當時臨時儲存的$scope.master拷貝回model去
- app.directive("cancel",function($document){
- return{
- restrict: 'AE',
- require: 'ngModel',
- link: function(scope,element,attrs,ngModel){
- element.bind("click",function(){
- scope.$apply(function(){
- angular.copy(scope.master,ngModel.$modelValue);
- //console.log(ngModel.$modelValue);
- })
- var id = "txt_name_" +ngModel.$modelValue.id;
- var obj = $("#"+id);
- obj.removeClass("active");
- obj.addClass("inactive");
- obj.prop("readOnly",true);
- scope.$apply(function(){
- scope.showEdit = true;
- })
- })
- }
- }
- });
最後就是Delete了,其實永遠都要記住的事Angular是MVC,所以你這裡你不用操心刪除table行這樣的事,只要刪除model中emploee.id = @id就可以了
- app.directive("delete",function($document){
- return{
- restrict:'AE',
- require: 'ngModel',
- link:function(scope, element, attrs,ngModel){
- element.bind("click",function(){
- var id = ngModel.$modelValue.id;
- alert("delete item where employee id:=" + id);
- scope.$apply(function(){
- for(var i=0; i<scope.employees.length; i++){
- if(scope.employees[i].id==id){
- console.log(scope.employees[i])
- scope.employees.splice(i,1);
- }
- }
- console.log(scope.employees);
- })
- })
- }
- }
- });
基本上就完工了。這裡我沒有用任何現成的angular 外掛,這只是對angular基本原理的闡述,如有誤導或者有能簡單的方法請指教。