写点什么

AngularJS 进阶 (十一)AngularJS 实现表格数据的编辑, 更新和删除

  • 2022-12-02
    江苏
  • 本文字数:1842 字

    阅读完需:约 6 分钟

AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除

实现首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据


var app = angular.module('plunker', ['ui.bootstrap']);app.controller('MainCtrl', function(scope.name = 'World';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="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>
复制代码


这里,我们用 angular 的 directive 来对着三个标签进行事件的绑定。


angular 的 dirctive 主要作用于 DOM 对象,而且他可以对 Element Name (比如<edit></edit>) )、Attribute(比如<mytag edit=”express”></mytag> 、Comment <!--   my comment –>  对应于 M、Class <link class=”mycssclass”></link>)。


默认对 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 的。


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("cancel",function(apply(function(){angular.copy(scope.master,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(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 基本原理的阐述,如有误导或者有能简单的方法请指教。


发布于: 刚刚阅读数: 5
用户头像

No Silver Bullet 2021-07-09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除_表格_No Silver Bullet_InfoQ写作社区