AngularJS Tabular Data with Edit/Update/Delete
效果
首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据
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 = {};
});
这里,我们可以直接
var app = angular.module('plunker',[]);
因为我们没有用到angular的bootstrap.
<!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>
在这里,我们使用一个<table>来显示所有的employee的name和phone,为了简单,我们这里只对employee name进行修改。在这里,我们自定义三个标签,<edit>,<update>,<delete>
我们来看其中一个标签,<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的。
完整的edit
app.directive("edit",function($document){
return{
restrict: 'AE',
require: 'ngModel',
link: function(scope,element,attrs,ngModel){
element.bind("click",function(){
var id = "txt_name_" +ngModel.$modelValue.id;
scope.$apply(function(){
angular.copy(ngModel.$modelValue,scope.master);
//console.log(scope.master);
})
//console.log(id);
var obj = $("#"+id);
obj.removeClass("inactive");
obj.addClass("active");
obj.removeAttr("readOnly");
scope.$apply(function(){
scope.showEdit = false;
})
});
}
}
});
css
.inactive {
border: none;
background-color: #fff;
}
.active{
background-color: #fff;
}
下面,我们要给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基本原理的阐述,如有误导或者有能简单的方法请指教。
最后代码Demo
AngularJS Tabular Data with Edit/Update/Delete的更多相关文章
- [Spring Data JPA问题]Executing an update/delete query; nested exception is javax.persistence.TransactionRequiredException
JPQL如下: @Modifying(clearAutomatically = true) @Query("UPDATE SyncTestFromTKDO SET stuAns = '' w ...
- ListView控件的Insert、Edit和Delete功能(第二部分)
本系列文章将通过一个简单的实例,结合我自己使用ListView的情况,展示如何用ASP.NET 3.5 ListView控件进行基本的Insert.Edit和Delete操作. 系统要求: Windo ...
- PHP5: mysqli 插入, 查询, 更新和删除 Insert Update Delete Using mysqli (CRUD)
原文: PHP5: mysqli 插入, 查询, 更新和删除 Insert Update Delete Using mysqli (CRUD) PHP 5 及以上版本建议使用以下方式连接 MySQL ...
- [Hive - LanguageManual] DML: Load, Insert, Update, Delete
LanguageManual DML Hive Data Manipulation Language Hive Data Manipulation Language Loading files int ...
- ListView控件的Insert、Edit和Delete功能(第一部分)
摘自:http://blog.ashchan.com/archive/2007/08/28/listview-control-insert-edit-amp-delete-part-1aspx/ Li ...
- mysql5.7 闪回数据(update delete insert)
本次测试用Myflash闪回dml操作,有个前提条件是log_bin开启并且log模式是row: mysql> show global variables like "binlog%& ...
- MySQL 误操作后数据恢复(update,delete忘加where条件)【转】
在数据库日常维护中,开发人员是最让人头痛的,很多时候都会由于SQL语句 写的有问题导致服务器出问题,导致资源耗尽.最危险的操作就是在做DML操作的时候忘加where条件,导致全表更新,这是作为运维或者 ...
- mysql数据恢复 insert\update\delete 工具MyFlash
一.简介MyFlash是由美团点评公司技术工程部开发维护的一个回滚DML操作的工具.该工具通过解析v4版本的binlog,完成回滚操作.相对已有的回滚工具,其增加了更多的过滤选项,让回滚更加容易. 该 ...
- Caused by: javax.persistence.TransactionRequiredException: Executing an update/delete query
org.springframework.dao.InvalidDataAccessApiUsageException: Executing an update/delete query; nested ...
随机推荐
- HDU 1796How many integers can you find(简单容斥定理)
How many integers can you find Time Limit: 12000/5000 MS (Java/Others) Memory Limit: 65536/32768 ...
- 框架学习笔记:Unity3D的MVC框架——StrangeIoC
作为从AS3页游走过来的人,看见StrangeIoC会额外亲切,因为StrangeIoC的设计和RobotLegs几乎一致,作为一款依赖注入/控制反转(IoC)的MVC框架,StrangeIoC除了使 ...
- plsql developer导入导出数据库方法
导出步骤: 1 tools ->export user object 选择选项,导出.sql文件 2 tools ->export tables-> Oracle Export 选择 ...
- 深入了解 Dojo 的服务器推送技术
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...
- Android访问WebService的两种方法
首先解释一下WebService:WebService是一种基于SOAP协议的远程调用标准.通过WebService可以将不同操作系统平台,不同语言.不同技术整合到一起.详细见:http://baik ...
- TcxDBLookupCombobox 级联时第二级不显示正确内容的处理方法
在使用两个级联的 TcxDBLookupCombobox 时,会出现这种情况:当第一级的内容变更后,第二级的控件在界面上显示的文本不变化,即使数据集已经通过 Properites.OnChange 事 ...
- 什么是比特币(bitcoin)
一.什么是比特币? 比特币是一种由开源的P2P软件产生的电子货币,是一种网络虚拟货币.比特币使用遍布整个P2P网络节点的分布式数据库来记录货币的交易,并使用密码学的设计来确保货币流通各个环节安全性.比 ...
- 【linux设备模型】之platform设备驱动
一.platform总线.设备和驱动 platform是一种虚拟总线,对应的设备称为platform_device,对应的驱动称为platform_driver. platform_devic ...
- gulp如何自定义插件
gulp是基于”流“的构建工具,上层流的输出就是下层流的输入,为了更好的支持链式操作,可以使用through2或者map-stream这两个库来对node stream做一层包装 这里,我们就使用th ...
- SAP BW 重新初始化