AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除[通俗易懂]

AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除[通俗易懂]AngularJS实现表格数据的编辑,更新和删除效果实现首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据varapp=angular.module(‘plunker’,[‘ui.bootstrap’]);app.controller(‘MainCtrl’,function($scope){$scope.name=’World’;$sc

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

效果

 AngularJS进阶(十一)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基本原理的阐述,如有误导或者有能简单的方法请指教。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164210.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 奇怪的print progname “:\n”日志

    奇怪的print progname “:\n”日志

  • 安装anaconda和pycharm_anaconda安装pycharm

    安装anaconda和pycharm_anaconda安装pycharm目标:实现pycharm上操作Anaconda环境:系统:window7pycharm:2019步骤:1.下载:如果打算安装Anaconda,需要卸载之前安装的Python(如果不想卸载,参考博客,不过这个实在有点长,我没看完都),因为Anaconda是一个集成环境,所以是自带Python的,下载Anaconda,这个是官网:如图:根据电脑型号,选择版本,这里建议选择3.x…

  • oracle dmp导入导出_oracle导出数据

    oracle dmp导入导出_oracle导出数据Oracle数据导入导出imp/exp就相当于oracle数据还原与备份。exp命令可以把数据从远程数据库服务器导出到本地的dmp文件,imp命令可以把dmp文件从本地导入到远处的数据库服务器中。利用这个功能可以构建两个相同的数据库,一个用来测试,一个用来正式使用……Oracle数据导入导出imp/exp就相当于oracle数据还原与备份。exp命令可以把数据从远程数据库服务器导出到本地的dmp…

    2022年10月29日
  • Android Fragment 真正的完全解析(上)

    Android Fragment 真正的完全解析(上)自从Fragment出现,曾经有段时间,感觉大家谈什么都能跟Fragment谈上关系,做什么都要问下Fragment能实现不~~~哈哈,是不是有点过~~~本篇博客力求为大家说明Fragment如何产生,什么是Fragment,Fragment生命周期,如何静态和动态的使用Fragment,Fragment回退栈,Fragment事务;以及Fragment的一些特殊用途,例如:没有布局的Frag

  • python中的pop函数和append函数

    python中的pop函数和append函数pop()函数1、描述pop()函数用于移除列表中的一个元素(默认最后一个元素),并且返回该元素的值。语法pop()方法语法:list.pop(obj=list[-1])2、参数obj–可选参数,要移除列表元素的对象。3、返回值该方法返回从列表中移除的元素对象。4、实例以下实例展示了pop()函数的使用方法:#!/usr/bin/pythonaList=[123,’xyz’,’z

  • 工业相机:传感器尺寸与像元尺寸的关系

    工业相机:传感器尺寸与像元尺寸的关系相同分辨率的工业相机,传感器面积越大,则其单位像素的面积也越大,成像质量也会越好。同样的500万像素的工业相机,2/3”的传感器成像质量就要优于1/2”的。一般来说,工业相机的靶面大小,如果要求不是太严格,可以直接按照公式计算。通常,像工业相机厂家会告诉你多少寸的传感器,那么就可以直接使用16mm*X”的传感器得到工业相机的图像传感器的靶面对角线长度。**工业相机使用16mm代表1寸,而不是使用25

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号