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)


相关推荐

  • SPI协议简单介绍

    SPI协议简单介绍导言SPI是串行扩展总线。串行总线技术可以使系统的硬件设计大大简化、系统的体积减小、可靠性提高。同时系统的更改和扩充极为容易。常用的串行扩展总线有:I2C(InterICBus)总线、单总线(1-WIREBUS)、SPI(SerialPeripheralInterface)总线及Microwire/PLUS等。一、SPI协议SPI总线是微控制器四线的外部总线。SPI没有明文标准,是一种事实总线,对通信操作的实现由芯片厂商和驱动开发者通过datasheet和applicat..

    2022年10月15日
  • java语言的特性有什么

    java语言的特性有什么1.java语言是简单的java语言是和c++语言类似的,其次java中丢弃了c++中一些难理解的特性,比如运算符重载等,java语言不使用指针,并且拥有垃圾回收机制2.java语言是面向对象的java语言提供了类、接口和继承等特性,只支持类之间的单继承,但是支持接口之间的多继承,并且支持类与接口之间的实现机制,而且java是全面支持动态绑定的。3.java语言是分布式的jav…

  • 网络通信中 TCP 产生 RST 的三个条件分析

    网络通信中 TCP 产生 RST 的三个条件分析RST是TCP发生错误时发送的一种TCP分节(segment:传输层的PDU),可用来异常的关闭一个连接,此时客户端会返回一个ECONNREFUSED错误。它会在以下三种情况下产生:目的地为某个端口的SYN到达服务器,但并没有服务器在该端口监听。TCP想取消一个已有连接,即异常地关闭连接。TCP接收到一个根本不存在的连接上的分节。第一种情况可能有如下…

  • MySQL管理工具安装说明[通俗易懂]

    MySQL管理工具安装说明[通俗易懂]NavicatforMySQL10.0.11简体中文版(Linux版)navicat_for_mysql_10.0.11_cn_linux.tar.gz使用方法:1.打开终端:应用程序->系统工具(或附件)->终端,切换到root账户:$su-密码:(注意:输入root账户密码时,密码不会显示出来,也没有提示的特殊字符,直接输完密码按Enter键

  • async的基本用法「建议收藏」

    async的基本用法「建议收藏」1.async函数的基本形式2.async函数的返回值总是一个Promise无论async函数有无await操作,其总是返回一个Promise。1.没有显式return,相当于return

  • seq2seq模型以及其tensorflow的简化代码实现

    seq2seq模型以及其tensorflow的简化代码实现

    2021年11月19日

发表回复

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

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