AngularJS实现对用户信息的增删改查

来源：互联网发布：写小说软件编辑：程序博客网时间：2024/06/05 05:58
<!DOCTYPE html><html><head><meta charset="utf-8" /><script type="text/javascript" src="js/angular.js"></script><script type="text/javascript" src="js/angular-route.js"></script><script>var app=angular.module("myApp",["ngRoute"]);var user=[{"id":1,"name":"小明","pwd":111,"age":20,"sex":"女","state":false},{"id":2,"name":"小李","pwd":222,"age":5,"sex":"女","state":false},{"id":3,"name":"小红","pwd":333,"age":55,"sex":"男","state":false}];app.value("user",user);app.config(["$routeProvider",function($routeProvider){$routeProvider.when("/addUser",{controller:"myCtrl", templateUrl:"addUser.html"}).when("/updatePwd",{controller:"myCtrl",templateUrl:"updatePwd.html"}).otherwise({redirectTo:"/addUser"});}]);app.controller("myCtrl",function($scope,user,$location){//先拿到数组$scope.user=user;//删除全部$scope.delete=function(){$scope.user.splice($scope.user);}//定义页面跳转方法$scope.goToUrl=function(path){$location.path(path);};$scope.goToUrl2=function(path){$location.path(path);};//添加用户信息$scope.add=function(){var newuser={id:$scope.id, name:$scope.name, pwd:$scope.pwd, age:$scope.age, sex:$scope.sex};//将新数组中的信息放到user数组中$scope.user.push(newuser);};//修改用户信息var i=0;$scope.update=function($index){//将旧密码的值取到$scope.oldpwd=$scope.user[$index].pwd;//将用户名取到$scope.newname=$scope.user[$index].name;//拿到数组的下标i=$index;};//提交$scope.sum=function(){i++;//就是将新密码赋值给数组里的就密码$scope.user[i].pwd=$scope.newpwd;};//批量删除$scope.deleteSel = function(){var userNames = [];//遍历users数组，获取状态是选中的user对象的名字for(index in $scope.user){if($scope.user[index].state == true){userNames.push($scope.user[index].name);}}if(userNames.length>0){if(confirm("是否删除选中项？")){for(i in userNames){var name = userNames[i];for(i2 in $scope.user){if($scope.user[i2].name == name){$scope.user.splice(i2,1);}}}}}else{alert("请选择删除项");}}});</script><title></title></head><body ng-app="myApp" ng-controller="myCtrl"><center>        <h1 align="center">学生信息管理系统</h1><hr /><div><table cellspacing="0" cellpadding="0" border="1"><tr><td><input type="text" placeholder="用户名查询" ng-model="queryname"/></td><td><input type="text" placeholder="年龄范围查询" ng-model="queryage"/></td><td>性别：<select ng-model="querysex"><option>女</option><option>男</option></select></td><td colspan="2"><button ng-click="delete()">全部删除</button></td><td colspan="2"><button ng-click="deleteSel()">批量删除</button></td></tr><tr><th><input type="checkbox" /></th><th>ID</th><th>用户名</th><th>密码</th><th>年龄</th><th>性别</th><th>操作</th></tr><tr ng-repeat="x in user|filter:{'name':queryname}|filter:{'age':queryage}|filter:{'sex':querysex}"><td><input type="checkbox" ng-model="x.state"/></td><td>{{x.id}}</td><td>{{x.name}}</td><td>{{x.pwd}}</td><td>{{x.age}}</td><td>{{x.sex}}</td><td><button ng-click="goToUrl2('/updatePwd');update($index)">修改密码</button></td></tr></table></div><button ng-click="goToUrl('/addUser')">添加用户</button><script type="text/ng-template" id="addUser.html"><form action="#"><table border="1" cellspacing="0" cellpadding="0"><tr><td>ID：</td><td><input type="text" ng-model="id"/></td></tr><tr><td>用户名：</td><td><input type="text" ng-model="name"/></td></tr><tr><td>密码：</td><td><input type="text" ng-model="pwd"/></td></tr><tr><td>年龄：</td><td><input type="text" ng-model="age"/></td></tr><tr><td>性别：</td><td><input type="text" ng-model="sex"/></td></tr><tr><td colspan="2" align="center"><button ng-click="add()">提交</button></td></tr></table></form></script><script type="text/ng-template" id="updatePwd.html" ><form><table border="1" cellspacing="0" cellpadding="0"><tr><td>用户名：</td><td><input type="text" ng-model="newname"/></td></tr><tr><td>旧密码：</td><td><input type="text" ng-model="oldpwd"/></td></tr><tr><td>新密码：</td><td><input type="text" ng-model="newpwd"/></td></tr><tr><td>确认密码：</td><td><input type="text" /></td></tr><tr><td colspan="2" align="center"><button ng-click="sum()">提交</button></td></tr></table></form></script><div ng-view></div></center></body></html>
阅读全文
0 0