Angularjs学习笔记6_table1
<!DOCTYPE html>
<html lang="en" ng-app="plunker">
<head>
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.inactive {border: none; background-color: #fff;}
.active{ background-color: #fff; }
</style>
</head>
<body ng-controller="MainCtrl">
<h2>Inline Edit</h2>
<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>
<script>
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 = {}; //临时变量，存储中间值
});
app.directive("edit",function($document){
return{
restrict: 'AE',
require: 'ngModel',
link: function(scope,element,attrs,ngModel){
element.bind("click",function(){
alert("I am clicked for editing");
var id = "txt_name_" +ngModel.$modelValue.id;
scope.$apply(function(){
angular.copy(ngModel.$modelValue,scope.master);
})
var obj = $("#"+id);
obj.removeClass("inactive");
obj.addClass("active");
obj.removeAttr("readOnly");
scope.$apply(function(){
scope.showEdit = false;
})
});
});
}
}
});
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;
})
})
}
}
});
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;
})
})
}
}
});
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);
})
})
}
}
});
</script>
</body>
</html>
Angularjs学习笔记6_table1的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
随机推荐
- RPD Volume 168 Issue 4 March 2016 评论2
Influence of the phantom shape (slab, cylinder or Alderson) on the performance of an Hp(3) eye dosem ...
- 【模拟】bzoj2760 [JLOI2011]小A的烦恼
注意细节和初始化. #include<cstdio> #include<string> #include<algorithm> #include<iostre ...
- python3开发进阶-Django视图（View）的常见用法
阅读目录 简述Django的View(视图) CBV和FBV Request对象和Response对象 Django组件(render,redirect)详解 一.简述Django的View(视图) ...
- 10.1（java学习笔记）JDBC基本操作（连接，执行SQL语句，获取结果集）
一.JDBC JDBC的全称是java database connection java数据库连接. 在java中需要对数据库进行一系列的操作,这时就需要使用JDBC. sun公司制定了关于数据库操作 ...
- JAVA 按时间排序
排序使用的是 Collections.sort(List,Comparator) 自定义类实现Comparator接口 假如A的值大于B,你返回1.这样调用Collections.sort()方法就是 ...
- asp.net 二级域名（路由方式实现）
自从微软发布 ASP.NET MVC 和routing engine (System.Web.Routing)以来,就设法让我们明白你完全能控制URL和routing,只要与你的application ...
- Implementing DDD Reading - Strategic Design
1. 概念篇 1.1 领域 广义上讲,领域即是一个组织所做的事情以及其中所包含的一切,也是组织的业务范围以及在其中所进行的活动.软件所讨论的领域即是这个组织的领域,应该是清晰明确的.不同的层面或粒度, ...
- vue总结介绍
转自(https://zhuanlan.zhihu.com/p/23078117) 模板语法 Vue 提供了一堆数据绑定语法. {{ text }} 文本插值 <div v-html=" ...
- webmagic的多线程及线程池的应用
- SpringMVC中使用CommonsMultipartResolver进行文件上传
概述: CommonsMultipartResolver是基于Apache的Commons FileUpload来实现文件上传功能的.所以在项目中需要相应的jar文件. FileUpload版本要求1 ...