<!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. [NOI2018]屠龙勇士(exCRT)

    首先很明显剑的选择是唯一的,直接用multiset即可. 接下来可以发现每条龙都是一个模线性方程.设攻击第i条龙的剑的攻击力为$s_i$,则$s_ix\equiv a_i\ (mod\ p_i)$. ...

  2. 【分块】bzoj1858 [Scoi2010]序列操作

    分块 Or 线段树 分块的登峰造极之题 每块维护8个值: 包括左端点在内的最长1段: 包括右端点在内的最长1段: 该块内的最长1段: 该块内1的个数: 包括左端点在内的最长0段://这四个是因为可能有 ...

  3. 【块状树】【树链剖分】【线段树】bzoj3531 [Sdoi2014]旅行

    离线后以宗教为第一关键字,操作时间为第二关键字排序. <法一>块状树,线下ac,线上tle…… #include<cstdio> #include<cmath> # ...

  4. 1.1(Spring MVC学习笔记)初识SpringMVC及SpringMVC流程

    一.Spring MVC Spring MVC是Spring提供的一个实现了web MVC设计模式的轻量级Web框架. Spring优点:网上有,此处不复述. 二.第一个Spring MVC 2.1首 ...

  5. STL之vector4

    描述 将一个n行m列矩阵元素输入存储后并输出. 部分代码已经给出,请补充完整,提交时请勿包含已经给出的代码. int main() { vector< vector<int> > ...

  6. 微服务之SpringCloud实战（五）：SpringCloud Eureka详解

    Eureka详解 在第三节高可用中,实际已经讲解了服务的注册,只不过注册的是Eureka本身,原理相同,通过这几篇文章我相信大家对Eureka有了一定的了解,三个核心角色:服务注册中心.服务提供者和服 ...

  7. iOS中的场景转换机制的浅显分析

    目前Apple推荐的场景转换的方法有以下几个: 一般的跳转方法: presentViewController Discussion In a horizontally compact environm ...

  8. Mac sublime 编译Python UnicodeEncodeError: 'ascii' codec can't encode characters in position 6-8: ordinal not in range(128)

    刚学Python,想打印个“hello 张林峰”,代码如下: #!/usr/bin/env python3 # -*- coding: utf-8 -*- print('hello 张林峰') 用su ...

  9. maven-pom-properties

    出处: http://blog.csdn.net/taiyangdao/article/details/52358083

  10. Linux下交叉编译gdb和gdbserver

    平台:tq2440 GCC:  gcc version 4.3.3 (Sourcery G++ Lite 2009q1-176) 这里过程中参考了下面两篇博文: http://blog.csdn.ne ...