<!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的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

随机推荐

  1. mysql对表的操作

    创建表 简单的方式 CREATE TABLE person ( number INT(11), name VARCHAR(255), birthday DATE ); 或者是 CREATE TABLE ...

  2. 【set】bzoj3715 [PA2014]Lustra

    对每种属性开一个set,只要某个厂家符合该属性的最值,就加进set,最后判断是否有某个厂家在4个set里都存在即可. #include<cstdio> #include<set> ...

  3. Problem Q: 零起点学算法12——求2个日期之间的天数

    #include<stdio.h> int main() { int a1,b1,c1,a2,b2,c2,s; scanf("%d-%d-%d",&a1,&am ...

  4. B/S架构 Web打印程序(Argox)

    B/S架构 Web打印程序 对于B/S架构下的管理软件系统,在客户端浏览器页面中如何透过本地打印机或网络打印机打印条码标签,Argox提供最常用的2种类型打印机集成方案. ●  PPLA 打印机IE游 ...

  5. 阿里p6面试

    电话面试: 第一次面试关注的问题,1)java基础: jvm 内存回收,垃圾回收基本原理,Java并发包的线程池,Java8的新特性.nio 堆排序.conrenthashmap , concurre ...

  6. ext js layout and tree

    数据     <configuration> <configSections> <section name="hibernate-configuration&q ...

  7. 用coffeescript实现类java的Map类

    class Map constructor : -> @entry = {} @count = 0 size : -> return @count isEmpty : -> retu ...

  8. PHP Xdebug调试专题

    1.介绍与安装 Xdebug是一个PHP扩展,安装配置好后,可以自动记录运行了哪些函数,用了多少毫秒,从哪个文件运行到哪个文件等等 它记下来的调试信息很详细,对一些复杂程序跟踪调试有很大的辅助效果,能 ...

  9. docker集群——介绍Mesos+Zookeeper+Marathon的Docker管理平台

    容器为用户打开了一扇通往新世界的大门,真正进入这个容器的世界后,却发现新的生态系统如此庞大.在生产使用中,不论个人还是企业,都会提出更复杂的需求.这时,我们需要众多跨主机的容器协同工作,需要支持各种类 ...

  10. varchar2 和varchar区别

    1.varchar2把所有字符都占两字节处理(一般情况下),varchar只对汉字和全角等字符占两字节,数字,英文字符等都是一个字节:2.VARCHAR2把空串等同于null处理,而varchar仍按 ...