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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
一、前言 在第二章《Memcached源码分析 - Memcached源码分析之命令解析（2）》 和第三章《Memcached源码分析 - Memcached源码分析之消息回应（3）》 中我们主要通过Memcached的get命令，分析了Memcached的命令解析和消息回应的模块功能。这一章，我们主要来详细看一下Memcached常用的增删改查操作。 在看Memcached的增删改查操作前，我们
-
本文向大家介绍js实现提交前对列表数据的增删改查，包括了js实现提交前对列表数据的增删改查的使用技巧和注意事项，需要的朋友参考一下 js实现列表数据的增删改查，AJAX提交后,js操作数据 最近工作中，有一处列表数据是页面初始化加载的，用户可以进行操作，因为这些数据并不存在数据库中，同时为了数据的整洁以及高效，所以要在页面进行增删改操作（其实查也可以，类似改），之前写过一个二维数组保存的，代码乱而
-
本文向大家介绍golang使用json格式实现增删查改的实现示例，包括了golang使用json格式实现增删查改的实现示例的使用技巧和注意事项，需要的朋友参考一下 需求和思路 在一般的小项目或者一个小软件,例如客户端之类的小程序中,可能会需要数据的持久化.但是使用一般的数据库(Mysql)之类的不合适.使用sqlite3这种嵌入式的是个较好的方法,但是Go语言中sqlite3的库是C语言的,Cgo
-
本文向大家介绍javascript实现表格增删改操作实例详解，包括了javascript实现表格增删改操作实例详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript实现表格增删改操作的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍Node.js+Express+Mysql 实现增删改查，包括了Node.js+Express+Mysql 实现增删改查的使用技巧和注意事项，需要的朋友参考一下 这次选用nodejs+express+mysql 使用http作为客户端，express框架搭建服务端，从而实现数据的增删改查。这篇文章可以算作上篇文章的升级篇，加入了和数据库的交互。 安装 node 直接去官网下载选择下载
-
本文向大家介绍JS实现简单的表格增删，包括了JS实现简单的表格增删的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现表格增删的具体代码，供大家参考，具体内容如下 描述： JS——实现简单的表格增删。 效果： 实现： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。