AngularJS实现表格数据的编辑,更新和删除

效果

实现

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

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

因为我们没有用到angular的bootstrap.这里，我们可以直接

  1. var app = angular.module('plunker',[]);
  2. <!DOCTYPE html>
  3. <html ng-app="plunker">
  4.  
  5.   <head>
  6.     <meta charset="utf-8" />
  7.     <title>AngularJS Plunker</title>
  8.     <script>document.write('<base href="' + document.location + '" />');</script>
  9.  
  10.     <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
  11.  
  12.     <script src="jquery-1.11.0.min.js"></script>
  13.     <script src="ui-bootstrap-tpls-0.10.0.min.js"></script>
  14.     <script src="bootstrap.js"></script>
  15.     <script src="app.js"></script>
  16.     <link rel="stylesheet" href="bootstrap.css" />
  17.     <link rel="stylesheet" href="mycss.css" />
  18.   </head>
  19.  
  20.   <body ng-controller="MainCtrl">
  21.     <h2>Inline Edit</h2>
  22.     <!--<input id="test" value="ddd"/>-->
  23.     <table>
  24.       <tr>
  25.         <th>name</th>
  26.         <th>phone</th>
  27.         <th></th>
  28.       </tr>
  29.       <tr ng-repeat="employee in employees">
  30.         <td>
  31.           <input type="text" id='txt_name_{{employee.id}}' ng-model="employee.name" class="inactive" readonly />
  32.         </td>
  33.         <td> <input type="text" ng-model="employee.phone" class="inactive" readonly /></td>
  34.         <td><edit ng-Model="employee" ng-show="showEdit"><a>Edit</a></edit>
  35.             <update ng-Model="employee" ng-show="!showEdit"><a>Update</a></update>
  36.             <cancel ng-Model="employee" ng-show="!showEdit"> | <a>Cencel</a></cancel>
  37.           | <delete ng-Model="employee"><a>Delete</a></delete>
  38.         </td>
  39.       </tr>
  40.     </table>
  41.   </body>
  42. </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的事件

  1. app.directive("edit", function(){
  2.   return{
  3.     restrict: "E",
  4.     link: function(scope,element){
  5.       element.bind("click",function(e){
  6.         alert("I am clicked for editing");
  7.       });
  8.     }
  9.   }
  10. })

这个时候呢，当你点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的。

  1. app.directive("edit", function(){
  2.   return{
  3.     restrict: "E",
  4.     link: function(scope,element){
  5.       element.bind("click",function(e){
  6.         alert("I am clicked for editing");
  7.       });
  8.     }
  9.   }
  10. })

下面，我们要给Update做事件的绑定。这里就没用什么可说的了。

  1. app.directive("update",function($document){
  2.   return{
  3.     restrict: 'AE',
  4.     require: 'ngModel',
  5.     link: function(scope,element,attrs,ngModel){
  6.       element.bind("click",function(){
  7.          alert(ngModel.$modelValue + " is updated, Update your value here.");
  8.          var id = "txt_name_" +ngModel.$modelValue.id;
  9.          var obj = $("#"+id);
  10.          obj.removeClass("active");
  11.          obj.addClass("inactive");
  12.          obj.attr("readOnly",true);
  13.           scope.$apply(function(){
  14.            scope.showEdit = true;
  15.          })
  16.       })
  17.     }
  18.   }
  19. })

在下面就是Cancel了，上面说过了，Cancel的时候要还原之前的值，这个时候呢，我们就用angular.copy把当时临时存储的$scope.master拷贝回model去

  1. app.directive("cancel",function($document){
  2.   return{
  3.     restrict: 'AE',
  4.     require: 'ngModel',
  5.     link: function(scope,element,attrs,ngModel){
  6.       element.bind("click",function(){
  7.          scope.$apply(function(){
  8.            angular.copy(scope.master,ngModel.$modelValue);
  9.            //console.log(ngModel.$modelValue);
  10.          })
  11.  
  12.          var id = "txt_name_" +ngModel.$modelValue.id;
  13.          var obj = $("#"+id);
  14.          obj.removeClass("active");
  15.          obj.addClass("inactive");
  16.          obj.prop("readOnly",true);
  17.           scope.$apply(function(){
  18.            scope.showEdit = true;
  19.          })
  20.       })
  21.     }
  22.   }
  23. });

最后就是Delete了，其实永远都要记住的事Angular是MVC，所以你这里你不用操心删除table行这样的事，只要删除model中emploee.id = @id就可以了

  1. app.directive("delete",function($document){
  2.   return{
  3.     restrict:'AE',
  4.     require: 'ngModel',
  5.     link:function(scope, element, attrs,ngModel){
  6.       element.bind("click",function(){
  7.         var id = ngModel.$modelValue.id;
  8.         alert("delete item where employee id:=" + id);
  9.         scope.$apply(function(){
  10.           for(var i=0; i<scope.employees.length; i++){
  11.             if(scope.employees[i].id==id){
  12.                console.log(scope.employees[i])
  13.                scope.employees.splice(i,1);
  14.             }
  15.           }
  16.           console.log(scope.employees);
  17.         })
  18.       })
  19.     }
  20.   }
  21. });

基本上就完工了。这里我没有用任何现成的angular 插件，这只是对angular基本原理的阐述，如有误导或者有能简单的方法请指教。

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

  1. 09Microsoft SQL Server 表数据插入，更新，删除

    Microsoft SQL Server 表数据插入,更新,删除 向表中插入数据 INSERT INTO insert into tb1 values(0004,'张凤凤') insert into ...

  2. 09Oracle Database 数据表数据插入，更新，删除

    Oracle Database 数据表数据插入,更新,删除 插入数据 Insert into table_name(column) values(values); insert into studen ...

  3. MYSQL数据插入、更新及删除

    上文讲到创建数据表,本文介绍create table后的数据插入: 一.通过insert into ...values...插入 insert into tablename (column1,colu ...

  4. SQL Server索引进阶：第十三级，插入，更新，删除

    在第十级到十二级中,我们看了索引的内部结构,以及改变结构造成的影响.在本文中,继续查看Insert,update,delete和merge造成的影响.首先,我们单独看一下这四个命令. 插入INSERT ...

  5. AngularJS进阶(十)AngularJS改变元素显示状态

    AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...

  6. AngularJS进阶(二)AngularJS路由问题解决

    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...

  7. AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框

    AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...

  8. 如何用angularjs制作一个完整的表格之五__完整的案例

    由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...

  9. angularJS进阶阶段(4)

    angularJS进阶阶段(4) 编译器/$compile 编译器$compile是一个AngularJS的内置服务,它负责遍历DOM树来查找匹配指令, 并调用指令的实现代码进行处理. HTML编译包 ...

随机推荐

  1. 剑指Offer——知识点储备-JVM基础

    剑指Offer--知识点储备-JVM基础 1.java内存与内存溢出 1.1 JVM分为哪些区,每一个区干嘛的?(见java虚拟机38页) (1)程序计数器(线程私有) 当前线程执行字节码的信号指示器 ...

  2. 好用的SQLAlchemy

    准备 安装SQLAlchemy框架 测试代码 知识点剖析 引入库支持 基类和引擎 实体类 声明类 数据库自动完成 CRUD 总结 这里简单的记录一下本人第一次使用SQLAlchemy这个ORM框架的过 ...

  3. iOS中NSTimer的invalidate调用之后

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交 ...

  4. FFmpeg示例程序合集-批量编译脚本

    此前做了一系列有关FFmpeg的示例程序,组成了<最简单的FFmpeg示例程序合集>,其中包含了如下项目:simplest ffmpeg player:                   ...

  5. 开源项目——小Q聊天机器人V1.4

    小Q聊天机器人V1.0 http://blog.csdn.net/baiyuliang2013/article/details/51386281 小Q聊天机器人V1.1 http://blog.csd ...

  6. 【安卓中的缓存策略系列】安卓缓存策略之磁盘缓存DiskLruCache

    安卓中的缓存包括两种情况即内存缓存与磁盘缓存,其中内存缓存主要是使用LruCache这个类,其中内存缓存我在[安卓中的缓存策略系列]安卓缓存策略之内存缓存LruCache中已经进行过详细讲解,如看官还 ...

  7. java根据概率生成数字

    /** * JAVA 返回随机数,并根据概率.比率 * @author zhanglei * */ public class MathRandom { /** * 0出现的概率为%50 */ publ ...

  8. 怎么在Eclipse中添加VI插件

    下载地址 Vi插件下载位置 怎么安装? 将下载下来的zip文件进行解压,然后把对于的目录下的文件分别复制到eclipse目录下的plugins 和features目录下: 注册 在eclipse根目录 ...

  9. 汉字转拼音的Oracle函数

    前言: 最近处理一个特殊的问题,需要用到汉字自动转换拼音的功能. 解决: 在这里找了不少资料,都是有所缺陷,而且也好像很绕.其实是一个很简单的东东.后来还是自己写了一个函数获取.分享出来,给有需要的X ...

  10. log4j 日志限制大小　拆分成30个　不按日期分日志　按大小拆分　按日期产生

    先说一下按日期产生,不解释,大家都懂,这种方法的缺点就是很吃硬盘空间 log4j.rootLogger=INFO,logfile,stdout log4j.logger.java.sql=DEBUG, ...