AngularJS实现表格数据的编辑,更新和删除

效果

实现

首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据

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 = {};
});

因为我们没有用到angular的bootstrap.这里,我们可以直接

var app = angular.module('plunker',[]);
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>

    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>

    <script src="jquery-1.11.0.min.js"></script>
    <script src="ui-bootstrap-tpls-0.10.0.min.js"></script>
    <script src="bootstrap.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="bootstrap.css" />
    <link rel="stylesheet" href="mycss.css" />
  </head>

  <body ng-controller="MainCtrl">
    <h2>Inline Edit</h2>
    <!--<input id="test" value="ddd"/>-->
    <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>
  </body>
</html>

我们来看其中一个标签,<edit>,这里呢,我们用ng-Model来绑定employee这个对象。

这里,我们用angular的directive来对着三个标签进行事件的绑定。

angular的dirctive主要作用于DOM对象,而且他可以对Element Name (比如<edit></edit>)  对应于E:)、Attribute(比如<mytag edit=”express”></mytag> 对应于A、

Comment <!--   my comment –>  对应于M、Class <link class=”mycssclass”></link> 对应于C)。

默认对Attribute (A),

当我们有

app.directiv("edit", function(){

return{

restrict: "E",

. . . .

}

});

意思是说,我们要找到叫Element=”edit”的DOM对象,这里就是<edit>,

当然你也可以携程 restrict: “AE”,那意思就是说要找到Element或者attribute = edit的DOM对象

这里你可以随便对AEMC进行组合。

当你找到之后呢,就要对这个DOM进行操作,对于我们来说,就是对他绑定一个click的事件

app.directive("edit", function(){
  return{
    restrict: "E",
    link: function(scope,element){
      element.bind("click",function(e){
        alert("I am clicked for editing");
      });
    }
  }
})

这个时候呢,当你点Edit的时候呢,click事件就会触发。

再往下呢就是对edit click事件的延伸,我们要得到employee name的inputbox,然后对他进行css的转换,比如当你click edit后,应该出现inputbox的css的inactive或者active的调整,并且移除readOnly

这里要注意一件事,就是angular.copy,为什么使用angular.copy?这个是为后面的cancel做准备的,当你放弃修改的时候,你希望你的值恢复成原样,这个时候,对于angularJS来说,是要对model恢复原样。如何恢复修改之前的model?最简单的方法就是创建一个$scope.master = {}空的对象,然后在你click edit之后,马上把还没改变的model拷贝到这个空的master中去,把master作为一个临时的存储对象。

当我们click Edit之后,我们要隐藏Edit,而叫Update | Cancel出现。这个时候$scope.showEdit就用上了,在<edit>,<update>,<cancel>上面都有一个ng-show,这个flag用来指定这个元素是不是要显示。ng-show=”showEdit”这个值是绑定$scope.showEdit的。

app.directive("edit", function(){
  return{
    restrict: "E",
    link: function(scope,element){
      element.bind("click",function(e){
        alert("I am clicked for editing");
      });
    }
  }
})

下面,我们要给Update做事件的绑定。这里就没用什么可说的了。

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;
         })
      })
    }
  }
})

在下面就是Cancel了,上面说过了,Cancel的时候要还原之前的值,这个时候呢,我们就用angular.copy把当时临时存储的$scope.master拷贝回model去

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;
         })
      })
    }
  }
});

最后就是Delete了,其实永远都要记住的事Angular是MVC,所以你这里你不用操心删除table行这样的事,只要删除model中emploee.id = @id就可以了

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);
        })
      })
    }
  }
});

基本上就完工了。这里我没有用任何现成的angular 插件,这只是对angular基本原理的阐述,如有误导或者有能简单的方法请指教。

AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除的更多相关文章

  1. 09Microsoft SQL Server 表数据插入,更新,删除

    Microsoft SQL Server 表数据插入,更新,删除 向表中插入数据 INSERT INTO insert into tb1 values(0004,'张凤凤') insert into ...

  2. 09Oracle Database 数据表数据插入,更新,删除

    Oracle Database 数据表数据插入,更新,删除 插入数据 Insert into table_name(column) values(values); insert into studen ...

  3. MYSQL数据插入、更新及删除

    上文讲到创建数据表,本文介绍create table后的数据插入: 一.通过insert into ...values...插入 insert into tablename (column1,colu ...

  4. SQL Server索引进阶:第十三级,插入,更新,删除

    在第十级到十二级中,我们看了索引的内部结构,以及改变结构造成的影响.在本文中,继续查看Insert,update,delete和merge造成的影响.首先,我们单独看一下这四个命令. 插入INSERT ...

  5. AngularJS进阶(十)AngularJS改变元素显示状态

    AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...

  6. AngularJS进阶(二)AngularJS路由问题解决

    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...

  7. AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框

    AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...

  8. 如何用angularjs制作一个完整的表格之五__完整的案例

    由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...

  9. angularJS进阶阶段(4)

    angularJS进阶阶段(4) 编译器/$compile 编译器$compile是一个AngularJS的内置服务,它负责遍历DOM树来查找匹配指令, 并调用指令的实现代码进行处理. HTML编译包 ...

随机推荐

  1. python 3 dict函数 神奇的参数规则

    >>> dict({1:2},2=3)SyntaxError: keyword can't be an expression>>> dict({1:2},**{2: ...

  2. 物料分类新增&更新

    --新增 INV_ITEM_CATEGORY_PUB.Create_Category ( p_api_version IN NUMBER, p_init_msg_list IN VARCHAR2 DE ...

  3. Swift基础之Demo包含刷新,加载,网络请求,MVC

    Swift中有一个Alamofire第三方是进行网络请求的,它是AFNetworking的作者写的Swift形式,今天先介绍一下,利用pod导入AFNetworking,SVProgressHUD,M ...

  4. JAVA面向对象-----main方法详解

    JVM看不懂的可以跳过,这里不做过多解释,(^__^) 嘻嘻-- 主函数是静态的 public static void main(String[] args){ } 主函数是什么:主函数是一个特殊的函 ...

  5. Nginx的负载均衡 - 最少连接 (least_conn)

    Nginx版本:1.9.1 我的博客:http://blog.csdn.net/zhangskd 算法介绍 我们知道轮询算法是把请求平均的转发给各个后端,使它们的负载大致相同. 这有个前提,就是每个请 ...

  6. Spring MVC Junit4 单元测试 JunitTest

    @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(locations = { "/config/spring3/ap ...

  7. javascript命名规则

    javascript对大小写敏感(关键字.函数名.变量名等),标识符的首字符必须是字母.下划线或者$符,其后的字符可以含数字 如果之声明了变量,并未对其赋值,默认为undefined javascri ...

  8. C++中所有的变量和函数都必须有类型

    /* C++中所有的变量和函数都必须有类型 C语言中的默认类型在C++中是不合法的 函数f的返回值是什么类型,参数又是什么类型? 函数g可以接受多少个参数? */ //更换成.cpp就会报错 f(i) ...

  9. linux目录间的瞬间转移:dtags

    http://blog.csdn.net/pipisorry/article/details/50923957 linux下dtags的安装 apt-get install python3-pip # ...

  10. ROS_Kinetic_14 ROS工具roswtf的基本使用方法等

    ROS_Kinetic_14 ROS工具roswtf的基本使用方法 官网教程:http://wiki.ros.org/cn/ROS/Tutorials/Getting%20started%20with ...