Angular实现的增删改查

来源：互联网发布：华星全站仪传输软件编辑：程序博客网时间：2024/05/19 21:17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 引入AngularJS库 --><scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myTable" ng-controller="empController"><input type="text" ng-model="empName"/><!-- 这里只能调用控制器里的方法 --><input type="button" value="查询"  ng-click="queryEmp()"/><input type="button" value="添加"  ng-click="showSaveDiv()"/><table><tr><th>雇员编号</th><th>雇员名称</th><th>薪水</th><th>操作</th></tr><tr ng-repeat="i in emp"><td>{{i.ENO}}</td><td>{{i.ENAME}}</td><td>{{i.SAL}}</td><td><input type="button" eno="{{i.ENO}}" value="X" ng-click="deleteEmp()"/><input type="button" eno="{{i.ENO}}" value="U" ng-click="showUpdateDiv()"/></td></tr></table><div id="saveDiv" style="width:300px;height:150px;border:1px solid black;text-align:center;position:absolute;left:40%;top:40%;display:none"></P></P>雇员名称:<input type="text" ng-model="e.ename" /></p>薪       水:<input type="text" ng-model="e.sal" /></p><input id="saveBtn" type="button" ng-click="saveEmp()" value="保存" />    <input type="button" ng-click="cleanDiv()" value="关闭" /> </div></div></body><script type="text/javascript">//获取app对象modulevar app = angular.module('myTable', []);//controller层会调用service层  控制层参数斥是提供服务的参数//$scope作用域  $location路径服务  $http发送ajax app.controller('empController', function($scope,$http){//先对empName进行初始化$scope.empName="";//初始化添加div的数据$scope.e={ename:null,sal:null};/*打开saveDiv并把修改前的数据传过去*/$scope.showUpdateDiv=function(){var eno=event.srcElement.getAttribute("eno");var emp=$scope.emp; for(var i=0;i<emp.length;i++){                 if(emp[i].ENO==eno){                    $scope.e=emp[i];                    $scope.e={eno:eno,ename:emp[i].ENAME,sal:emp[i].SAL};                    break;}}document.getElementById("saveDiv").style.display="block";}/*打开saveDiv便于新增的操作*/$scope.showSaveDiv=function(){document.getElementById("saveDiv").style.display="block";}/*保存按钮的事件添加和修改*/$scope.saveEmp=function(){var url="";debugger;if($scope.e.eno==null){url='../ajaxAdd';}else{url='../ajaxUpdate';}$http({url:url,params:$scope.e}).then(function(responseJson){/*表示请求成功返回*/$scope.queryEmp();$scope.cleanDiv();},function(error){/*表示请求失败返回*/alert("错误："+error.status);})}/*清除saveDiv数据*/$scope.cleanDiv=function(){$scope.e={};document.getElementById("saveDiv").style.display="none";}/*根据条件查询的方法*/$scope.queryEmp=function(){$http({url:'../ajaxQuery?ename='+$scope.empName}).then(function(responseJson){/*表示请求成功返回*/$scope.emp=responseJson.data;},function(error){/*表示请求失败返回*/alert("错误："+error.status);})}//首次加载页面的时候调用一下查询的方法$scope.queryEmp();/*删除方法*/$scope.deleteEmp=function(){var eno=event.srcElement.getAttribute("eno");$http({url:'../ajaxDelete?eno='+eno}).then(function(responseJson){/*表示请求成功返回*///这里是因为在java里异常被try catch了，所以删除失败了也不会跳error方法if(responseJson.data==1){alert("删除成功");/*为了提高删除的性能，当从数据库删除数据之后就手支在$scope里把对应的数据给删除了arr.splice(index,length)删除数据指定索引位置的length个数据*/               var emp=$scope.emp; for(var i=0;i<emp.length;i++){                 if(emp[i].ENO==eno){                    $scope.emp.splice(i,1);                    break;}}}else{alert("删除失败");}},function(error){/*表示请求失败返回*/alert("错误："+error.status);})}});</script></html>
阅读全文
0 0