<!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. luogu P1623 [CEOI2007]树的匹配Treasury

    题目链接 luogu P1623 [CEOI2007]树的匹配Treasury 题解 f[i][0/1]表示当前位置没用/用了 转移暴力就可以了 code // luogu-judger-enable ...

  2. Java杂谈6——Java安全模型

    Java语言安全模型是其有别于传统的编程语言的一个很重要的特点,采用一种沙箱模型隔离了Java的运行环境与具体的操作系统,使得Java在网络环境下能够更为安全的运行.理解Java的安全模型,能够帮助我 ...

  3. [转] Matlab与C++混合编程（依赖OpenCV）

    作者 zouxy09@qq.com,原文 Matlab与C++混合编程(依赖OpenCV) 之前在运行别人论文的代码的时候,经常有遇到Matlab与C++混合编程的影子.实际上就是通过Matlab的M ...

  4. DBA_SEGMENTS - 查看数据库对象所分配的物理存储空间

    SELECT SEGMENT_NAME,SEGMENT_TYPE,<code>TABLESPACE_NAME</code>,EXTENTS,BLOCKS,BYTES/1024/ ...

  5. python获取系统信息，

    1 操作系统系统综合信息cur_sysinfo=platform.uname()浏览器信息cur_browserinfo=self.driver.capabilities['version']浏览器新 ...

  6. 鸟哥的linux私房菜服务器架设篇第五章linux常用网络指令

    ifconfig主要可以手动启动观察修改网络接口的相关参数 ifdown,ifup用来启动和关闭接口,后面直接接接口名称 两部主机两点沟通:ping 两主机之间各节点分析 traceroute 查看本 ...

  7. .NET中的CTS、CLS、CLR

    一.解释1 1.CLR(Common Language Runtime) :公共语言运行库 CLR 是CTS(Common Type System:通用类型系统)的实现, 即是说:CLR是应用程序的执 ...

  8. asp.net购物车，订单以及模拟支付宝支付（一）---购物车表及添加购物车流程

    在开发一个Web程序的时候用到了网购这个功能,上来分享并记录一下,以便以后忘记了可以自己看看(电脑东西太多,笔记都不知道放哪里去了啊啊啊啊啊!!!) 没有什么高并发量,什么什么技术理论,只是一个最最基 ...

  9. 10 Essential TypeScript Tips And Tricks For Angular Devs

    原文: https://www.sitepoint.com/10-essential-typescript-tips-tricks-angular/ ------------------------- ...

  10. 【招聘App】—— React/Nodejs/MongoDB全栈项目：登录注册

    前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...