<!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. Oracle的锁

    Oracle数据库中的锁机制 数据库是一个多用户使用的共享资源.当多个用户并发地存取数据时,在数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数 ...

  2. NOIP2010关押罪犯

    题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示 ...

  3. [Codeforces 10E] Greedy Change

    Brief Introduction: 给你一些种类的硬币,用最少的硬币数表示X 求最小的使贪心算法错误的X Algorithm: 一道论文题,<A Polynomial-time Algori ...

  4. FireDac Pooling

    1.建立FDManager的ConnectionDef.并设置此Pooling为True. 2.建立Thread类进行多个FDConnection连接DB. 3.本列是oracle远程数据.如下图: ...

  5. Scala实战高手****第6课 ：零基础实战Scala集合操作及Spark源码解析

    本课内容1.Spark中Scala集合操作鉴赏2.Scala集合操作实战 --------------------------------------------------------------- ...

  6. nginx+php简单配置环境

    首先我的需求是: 1. 需要有PHP的服务.web目录存放在各处. 2. 需要有多个端口. 步骤: 1. 安装nginx php,我的系统是mac 所以安装使用brew, 一键完成... 2. 开启p ...

  7. 【jQuery】:not选择器的说明和:checked选择器的使用

    1.:not选择器的说明使用 先给出一下例子: $(".form1 :not(input[name='category'])") 这个 能实现 获取到from1表单中除了input ...

  8. CSS3：绘制图形

    CSS画图形,基本上所有的实现都是对边框的角度的调整及组合. 以下不包含兼容浏览器的前缀,请使用时在border-radius前加-moz-.-webkit- .... 1.正常得不得了的矩形 .sq ...

  9. git相关知识：如何避免某些文件无需提交

    查看所有命令 git help -a 查看所有概念解释 git help -g 某个命令的具体帮助信息 git help command 如何避免某些文件无需提交? 合作开发时个人的约定的不上传的文件 ...

  10. centos搭建git服务器(转)

    一:git服务安装 1.安装git相关组件 [root@gitserver ~] yum -y install git 2.创建git用户 [root@gitserver ~] groupadd gi ...