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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
Javascript的闭包
Dec 31 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
基于vue.js实现的分页
Mar 13 Javascript
微信小程序实现日历功能
Nov 27 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
介绍几个array库的新函数 php
2006/12/29 PHP
php xml 入门学习资料
2011/01/01 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
php集成开发环境详解
2019/09/24 PHP
javascript 星级评分效果(手写)
2012/12/24 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
python中self原理实例分析
2015/04/30 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
党员四风剖析材料
2014/08/27 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
关于环保的宣传稿
2015/07/23 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript