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="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>
<!--<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基本原理的阐述，如有误导或者有能简单的方法请指教。
AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除的更多相关文章
- 09Microsoft SQL Server 表数据插入，更新，删除
Microsoft SQL Server 表数据插入,更新,删除 向表中插入数据 INSERT INTO insert into tb1 values(0004,'张凤凤') insert into ...
- 09Oracle Database 数据表数据插入，更新，删除
Oracle Database 数据表数据插入,更新,删除 插入数据 Insert into table_name(column) values(values); insert into studen ...
- MYSQL数据插入、更新及删除
上文讲到创建数据表,本文介绍create table后的数据插入: 一.通过insert into ...values...插入 insert into tablename (column1,colu ...
- SQL Server索引进阶：第十三级，插入，更新，删除
在第十级到十二级中,我们看了索引的内部结构,以及改变结构造成的影响.在本文中,继续查看Insert,update,delete和merge造成的影响.首先,我们单独看一下这四个命令. 插入INSERT ...
- AngularJS进阶(十)AngularJS改变元素显示状态
AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...
- AngularJS进阶(二)AngularJS路由问题解决
AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...
- AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框
AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...
- 如何用angularjs制作一个完整的表格之五__完整的案例
由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...
- angularJS进阶阶段(4)
angularJS进阶阶段(4) 编译器/$compile 编译器$compile是一个AngularJS的内置服务,它负责遍历DOM树来查找匹配指令, 并调用指令的实现代码进行处理. HTML编译包 ...
随机推荐
- Mac上如何完美的转换epub至mobi供kindle观看
网上有很多书籍资源的格式都是epub(我们不谈及pdf格式了,你懂得-),epub格式是无法直接在kindle上观赏的,除非你越狱kinde后,安装扩展插件 我们可以将epub转换为mobi格式,网上 ...
- Python 描述符 data 和 non-data 两种类型
仅包含__get__的,是non-data descriptor, 如果实例__dict__包含同名变量, 则实例优先; 如果还包含__set__, 则是data descriptor, 优先于实例_ ...
- Windows 8 Cython 的配置(解决Unable to find vcvarsall.bat问题)
关键是安装之前配置编译器. 1.下载MinGW 编译器 http://www.mingw.org/download.shtml 2.把编译器路径(例如C:\Program Files (x86)\Co ...
- 协议系列之IP协议
1.协议 协议(protocol)的定义:为计算机网络中进行数据交换而建立的规则.标准或约定的集合.两个终端相互通信时双方达成的一种约定,规定了一套通信规则,双方通信必须遵守这些规则.这些规则规定了分 ...
- [maven学习笔记]第一节，认识maven,搭建maven开发环境,写第一个HelloWorld
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40142771 maven官网:http://maven.apache.org/ 学习视 ...
- 【IOS 开发】基本 UI 控件详解 (UISegmentedControl | UIImageView | UIProgressView | UISlider | UIAlertView )
转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/50163725 一. 分段控件 (UISegmentedControl) 控件展 ...
- Java程序员的必备知识-类加载机制详解
类加载器的概念 类加载器是一个用来加载类文件的类. Java源代码通过javac编译器编译成类文件.然后JVM来执行类文件中的字节码来执行程序.类加载器负责加载文件系统.网络或其他来源的类文件. JV ...
- SSH深度历险（十一） AOP原理及相关概念学习+xml配置实例（对比注解方式的优缺点）
接上一篇 SSH深度历险(十) AOP原理及相关概念学习+AspectJ注解方式配置spring AOP,本篇我们主要是来学习使用配置XML实现AOP 本文采用强制的CGLB代理方式 Security ...
- 微信公众平台开发者中心服务器配置Token验证失败问题
微信发展如火如荼,没有哪家的企业营销能避开微信不谈的,那像我们这种给客户实施项目的多多少少会涉及微信端的开发,本文只要给从未做过微信开发的人做一些简单的演示,行家里手们可以呵呵一下该干嘛干嘛去了. 微 ...
- 我眼中的Linux设备树(三 属性)
三 属性(property)device_type = "memory"就是一个属性,等号前边是属性,后边是值.节点是一个逻辑上相对独立的实体,属性是用来描述节点特性的,根据需要一 ...