Tel：028-86922220 我有需求

AngularJS如何实现表格的增删改查

这篇文章主要介绍了AngularJS如何实现表格的增删改查，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联是一家专业从事成都网站建设、网站制作的网络公司。作为专业网站设计公司,创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、成都营销网站建设及网站设计开发服务！

js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

用AngularJS实现对表格的增删改查（仅限前端），具体代码：

AngularJS如何实现表格的增删改查




 
 实现表格的增删改查
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 管理信息：


 搜索：
 添加
 
  
  
   姓名
   年龄
   城市
   操作
  
  
  
  
   {{x.name}}
   {{x.age}}
   {{x.city}}
   
   修改 
   删除
   
  
  
 
 
 
 

  

   

   
    
    
    
    添加信息

姓名：

年龄：

城市：

关闭保存

修改信息

姓名：

年龄：

城市：

关闭确定 var app = angular.module('myapp',[]); app.controller('myCtrl',function($scope){ //定义表格内容 $scope.texts = [ {name:"张三",age:"23",city:"海南"}, {name:"李四",age:"25",city:"香港"}, {name:"王五",age:"25",city:"济南"}, {name:"刘六",age:"22",city:"济南"}, {name:"李七",age:"35",city:"烟台"}, {name:"张八",age:"32",city:"聊城"}, {name:"吕九",age:"30",city:"盘锦"} ]; //定义一个空对象，用于保存和修改数据时临时存储 $scope.prod = {}; //定义一个单击删除按钮时触发的事件，用于删除选中行 $scope.del = function ($index) { if($index>=0){ if(confirm("是否删除"+$scope.texts[$index].name) ){ $scope.texts.splice($index,1); } } }; //定义一个全局变量idx,用于存储选中行的索引，方便执行保存操作。idx取值为0、1、、、、都有用，所以暂取值为-1; var idx = -1; //定义一个点击添加按钮时触发的事件，用于新增数据 $scope.add = function(){ //显示bootstrap中的模块窗口 $('#modal-1').modal('show'); }; //定义一个点击保存按钮时触发的事件 $scope.save = function(){ //将添加的值赋给数组 $scope.texts.name = $scope.newName; $scope.texts.age = $scope.newAge; $scope.texts.city = $scope.newCity; $scope.texts.push({name:$scope.newName,age:$scope.newAge,city:$scope.newCity}); //关闭模块窗口 $('#modal-1').modal('hide'); }; //定义一个点击修改按钮时出发的事件，用于修改数据 $scope.update = function($index){ //显示bootstrap中的模块窗口 $('#modal-2').modal('show'); //将选中行的数据绑定到临时对象prod中，在下面的模态窗口中展示出来 $scope.prod.name = $scope.texts[$index].name; $scope.prod.age = $scope.texts[$index].age; $scope.prod.city = $scope.texts[$index].city; //选中行的索引赋值给全局变量idx idx = $index; }; //定义一个点击确定按钮时触发的事件, $scope.ensure = function () { //将修改后的值赋给数组 $scope.texts[idx].name = $scope.prod.name; $scope.texts[idx].age = $scope.prod.age; $scope.texts[idx].city = $scope.prod.city; //关闭模块窗口 $('#modal-2').modal('hide'); }; });

感谢你能够认真阅读完这篇文章，希望小编分享的“AngularJS如何实现表格的增删改查”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

分享名称：AngularJS如何实现表格的增删改查
URL标题：http://bzwzjz.com/article/peceig.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接：重庆网站设计重庆网站制作成都网站设计四川成都网站建设营销型网站建设成都网站制作成都网站建设成都企业网站制作定制网站建设高端网站建设成都做网站建设公司温江网站设计网站制作定制级高端网站建设专业网站建设成都品牌网站设计高端网站设计成都网站建设公司四川成都网站制作重庆手机网站建设响应式网站设计成都网站建设