AngularJS实现表格的增删改查(仅限前端)


Posted in Javascript onJuly 04, 2017

用AngularJS实现对表格的增删改查(仅限前端),具体代码:

AngularJS实现表格的增删改查(仅限前端)

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>实现表格的增删改查</title>
 
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="this is my page">
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" >
 <link rel="stylesheet" href="css/font-awesome.css" type="text/css"></link>
 <link rel="stylesheet" href="css/ui.css" type="text/css"></link>
 <link rel="stylesheet" href="css/form.css" type="text/css"></link>
 
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
 <style>
 .add{
  position:relative;
  top:-40px;
  left:1000px;
 }
 </style>
 </head>
 
 <body>
 <div ng-app="myapp" ng-controller="myCtrl">
 <h2>管理信息:</h2><br>
 <p>搜索:<input type="text" placeholder="请输入关键字" ng-model="test"></p>
 <button class="btn btn-primary add" ng-click="add()">添加</button>
 <table class="table table-bordered" style="text-align: center">
  <thead>
  <tr>
   <td>姓名</td>
   <td>年龄</td>
   <td>城市</td>
   <td>操作</td>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="x in texts | filter:test">
   <td>{{x.name}}</td>
   <td>{{x.age}}</td>
   <td>{{x.city}}</td>
   <td>
   <button class="btn btn-warning"" ng-click="update($index)">修改</button> 
   <button class="btn btn-danger" ng-click="del($index)">删除</button>
   </td>
  </tr>
  </tbody>
 </table>
 
 <!-- 添加信息 -->
 <div class="modal" id="modal-1">

  <div class="modal-dialog">

   <div class="modal-content">

   <div class="modal-header">
    <button class="close" data-dismiss="modal">
    <span class="glyphicon glyphicon-remove"></span>
    </button>
    <h3 class="modal-title">添加信息</h3>
   </div>

   <div class="modal-body">
    <div>姓名:</div>
    <input ng-model="newName" type="text">
    <div>年龄:</div>
    <input ng-model="newAge" type="text">
    <div>城市:</div>
    <input ng-model="newCity" type="text">
   </div>

   <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">关闭</button>
    <button class="btn btn-success" ng-click="save()">保存</button>
   </div>

   </div>

  </div>

 </div>
 
 <!-- 修改信息 -->
 <div class="modal" id="modal-2">

  <div class="modal-dialog">

   <div class="modal-content">

   <div class="modal-header">
    <button class="close" data-dismiss="modal">
    <span class="glyphicon glyphicon-remove"></span>
    </button>
    <h3 class="modal-title">修改信息</h3>
   </div>

   <div class="modal-body">
    <div>姓名:</div>
    <input ng-model="prod.name" value="{{prod.name}}" type="text">
    <div>年龄:</div>
    <input ng-model="prod.age" value="{{prod.age}}" type="text">
    <div>城市:</div>
    <input ng-model="prod.city" value="{{prod.city}}" type="text">
   </div>

   <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">关闭</button>
    <button class="btn btn-success" ng-click="ensure()">确定</button>
   </div>

   </div>

  </div>

  </div>
 </div>
 
 <script type="text/javascript">
 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');
  };
  
  
  
 });
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 #Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 #Javascript
原生js实现简单的链式操作
Jul 04 #Javascript
详解用vue编写弹出框组件
Jul 04 #Javascript
使用vue构建一个上传图片表单
Jul 04 #Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 #Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 #Javascript
You might like
PHP新手上路(十二)
2006/10/09 PHP
PHP实现下载功能的代码
2012/09/29 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
Java基础面试题
2014/07/19 面试题
关于Java finally的面试题
2016/04/27 面试题
Java模拟试题
2014/11/10 面试题
自动化毕业生专业自荐书范文
2014/02/04 职场文书
就业协议书范本
2014/04/11 职场文书
商场促销活动策划方案
2014/08/18 职场文书
2015年教师新年寄语
2014/12/08 职场文书
导游词格式
2015/02/13 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫