<!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. java中的3大特性之继承

    继承的特点:继承父类的属性和方法.单继承(多层继承)c++里的继承是多继承 特性 :方法的复写(重写) java中的继承和OC中一样. 比如:人可以养狗; 人---->狗 :整体和部分(拥有)关 ...

  2. [Atcoder Grand Contest 002] Tutorial

    Link: AGC002 传送门 A: …… #include <bits/stdc++.h> using namespace std; int a,b; int main() { sca ...

  3. [POJ 1739] Tony's Tour

    Link: POJ 1739 传送门 Solution: 这题除了一开始的预处理,基本上就是插头$dp$的模板题了 由于插头$dp$求的是$Hamilton$回路,而此题有起点和终点的限制 于是可以构 ...

  4. Java多线程——ReentrantLock源码阅读

    上一章<AQS源码阅读>讲了AQS框架,这次讲讲它的应用类(注意不是子类实现,待会细讲). ReentrantLock,顾名思义重入锁,但什么是重入,这个锁到底是怎样的,我们来看看类的注解 ...

  5. Jquery中的ajax应用（第九章PPT）

    <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1&q ...

  6. golang的reflect

    引用自 http://www.jb51.net/article/115002.htm 和 C 数据结构一样,Go 对象头部并没有类型指针,通过其自身是无法在运行期获知任何类型相关信息的.反射操作所需要 ...

  7. easyui 只刷新当前页面的数据 datagrid reload 方法

    $('#refreshbtn').click(function() { $("#t_auclot").datagrid("reload",serializeFo ...

  8. Plplot中line width 问题

    Plplot延续了Pgplot的设计风格,线的宽度函数plwid(int width)只能用整型变量,不能精确控制线宽.用pscairo画出的曲线总是太粗,这是plplot一个很老的问题(issue) ...

  9. python的 json.dumps 中文编码

    python的 json.dumps 中文编码 # -- coding: utf-8 -- 的作用:文件内容以utf-8编码 json.dumps 序列化时对中文默认使用的ascii编码, print ...

  10. MacBook安装office

    已更新至最新版Microsoft Office 2016 v16.13.18052304,完美支持macOS High Sierra 10.13.4,破解方法很简单,先安装Microsoft_Offi ...