AngularJS实现对用户信息的增删改查
来源:互联网 发布:国密 java 编辑:程序博客网 时间:2024/06/05 11:11
本篇是对表单进行增删改查的操作,用到的是AngularJS实现的,有需要的可以看一下。
实现效果:
实现要求:
1. 搭建页面
2. 显示所有用户信息
3. 根据用户名实现用户查询显示
4. 根据年龄范围下拉菜单实现用户显示
5. 根据用户年龄实现用户显示
6. 实现批量删除功能:选中左侧多选框,点击批量删除,删除选中项,没选中提示用户,点击最上方的多选框,实现全选。
7. 点击添加用户,下方页面显示添加用户界面,填写用户信息,满足条件如下进行添加
a) 用户名非空
b) 两次密码一致
c) 年龄在10到60之间
8. 点击修改密码按钮,下方页面显示修改密码页面(如下),默认把要修改的用户名显示在用户名输入框,并且不能更改用户名,实现密码修改,要求如下
a) 旧密码要跟之前的密码一致
b) 两次输入的密码一致。
源码:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>综合练习</title> <style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } </style> <script type="text/javascript" src="angular-1.3.0.js" ></script> <script type="text/javascript" src="angular-route.js" ></script> <script type="text/javascript"> var app = angular.module("myApp",["ngRoute"]); //使用config配置路由规则 app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/addUser",{ controller:"addUserCtrl", templateUrl:"addUser.html" }) .when("/updatePwd/:name",{ controller:"updatePwdCtrl", templateUrl:"updatePwd.html" }) .otherwise({redirectTo:"/addUser"}); }]); app.controller("myCtrl",function($scope,$location){ $scope.users = [ {"id":1,"name":"张三","pwd":"123","age":20,"sex":"男"}, {"id":2,"name":"李四","pwd":"456","age":33,"sex":"女"}, {"id":3,"name":"王五","pwd":"789","age":42,"sex":"男"} ]; //定义页面跳转方法 $scope.goToUrl = function(path){ alert(path); $location.path(path); } //全部删除 $scope.del=function(){ if(confirm("确实删除吗?")){ $scope.users=[]; } }; $scope.ageTest=function(age,agesize){ if(agesize !="--请选择--"){ var ages=agesize.split("-"); var ageMin=ages[0]; var ageMax=ages[1]; if(age<ageMin || age>ageMax){ return false; }else{ return true; } }else{ return true; } } //批量删除 $scope.deleteSel=function(){ var userNames=[]; for(index in $scope.users){ if($scope.users[index].state == true){ userNames.push($scope.users[index].name); } } if(userNames.length>0){ if(confirm("是否删除选中项?")){ for(i in userNames){ var name=userNames[i]; for(i2 in $scope.users){ if($scope.users[i2].name==name){ $scope.users.splice(i2,1); } } } } }else{ alert("请选择删除的项") } } //全选按钮 $scope.gou=function () { for(var i=0;i<$scope.users.length;i++) { if($scope.checkAll==true) { $scope.users[i].state=true; } else { $scope.users[i].state=false; } } } }); //定义添加用户控制器 app.controller("addUserCtrl",function($scope){ $scope.name = ""; $scope.pwd = ""; $scope.pwd2 = ""; $scope.age = ""; $scope.sex = ""; $scope.sub = function(){ if($scope.name==""){ alert("用户名不能为空"); }else { if($scope.age>=10&&$scope.age<=60){ var newUser = { id:$scope.users.length + 1, name:$scope.name, pwd:$scope.pwd, age:$scope.age, sex:$scope.sex } //添加新用户. $scope.users.push(newUser); }else{ alert("年龄在10到60之间"); } } } }); //定义修改用户控制器 app.controller("updatePwdCtrl",function($scope,$routeParams){ $scope.name = $routeParams.name; $scope.oldPwd = ""; $scope.pwd1 = ""; $scope.pwd2 = ""; $scope.updatePwd = function(){ for(index in $scope.users){ if($scope.users[index].name==$scope.name){ if($scope.users[index].pwd==$scope.oldPwd){ if($scope.pwd1==$scope.pwd2){ $scope.users[index].pwd=$scope.pwd1; }else{ alert("两次密码不一致"); } }else{ alert("旧密码错误"); } } } } }); </script></head><body ng-app="myApp" ng-controller="myCtrl"><center> <h3>用户信息表</h3> <div> <input ng-model="search" placeholder="用户名查询" size="10" /> 年龄:<select id="age" ng-model="agesize" ng-init="agesize='--请选择--'"> <option>--请选择--</option> <option>19-30</option> <option>31-40</option> <option>41-50</option> </select> 性别:<select> <option>男</option> <option>女</option> </select> <input type="button" value="全部删除" ng-click="del()"/> <input ng-click="deleteSel()" type="button" value="批量删除"/> </div><br /> <div> <table border="1" cellspacing="1" cellpadding="10"> <thead> <tr> <th><input type="checkbox" ng-click="gou()" ng-model="checkAll"></th> <th>id</th> <th>用户名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="user in users | filter:{'name':search}" ng-if="ageTest(user.age,agesize)"> <th><input ng-model="user.state" type="checkbox"></th> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.pwd}}</td> <td>{{user.age}}</td> <td>{{user.sex}}</td> <td><button ng-click="goToUrl('/updatePwd/'+user.name)">修改密码</button> </td> </tr> </tbody> </table> </div><br /> <button class="addUser" ng-click="goToUrl('/addUser')">添加用户</button><br /><br /> <!-- 1.添加用户页面 --> <script type="text/ng-template" id="addUser.html"> <form action=""> <table border="1" cellspacing="1" cellpadding="10"> <tr> <th>用户名:</th> <td><input ng-model="name" type="text" required placeholder="请输入用户名"/></td> </tr> <tr> <th>密 码:</th> <td><input ng-model="pwd" placeholder="请输入密码" /></td> </tr><tr> <th>年 龄:</th> <td><input ng-model="age" placeholder="请输入年龄" /></td> </tr><tr> <th>性 别:</th> <td><input ng-model="sex" placeholder="请输入性别" /></td> </tr> <tr align="center"> <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td> </tr> </table> </form> </script> <!-- 2.修改用户信息页面 --> <script type="text/ng-template" id="updatePwd.html"> <form> <table border="1" cellspacing="1" cellpadding="10"> <tr> <th>用户名:</th> <td><input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td> </tr> <tr> <th>旧密码:</th> <td><input ng-model="oldPwd" placeholder="请输入密码" /></td> </tr><tr> <th>新密码:</th> <td><input ng-model="pwd1" placeholder="请输入密码" /></td> </tr><tr> <th>确认:</th> <td><input ng-model="pwd2" placeholder="请输入密码" /></td> </tr> <tr align="center"> <td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td> </tr> </table> </form> </script> <!-- 6.指定相应内容 --> <div ng-view> </div></center></body></html>
阅读全文
0 0
- AngularJS实现对用户信息的增删改查
- AngularJS实现对用户信息的增删改查
- AngularJS实现对用户信息的增删改查
- angularjs实现增删改查
- angularjs的增删改查
- angularjs的增删改查
- AngularJS对表格的增删改查(仅限前端)
- AngularJs轻松实现用户列表的增删改查
- AngularJS实现增删改查带路由的
- angularJS实现增删改查等
- angularJS/路由实现增删改查
- AngularJs增删改查
- angularjs增删改查
- AngularJs增删改查
- angularjs表格的增删改查
- AngularJS的增删改查+路由
- AngularJS页面的增删改查
- angularJS表格的增删改查
- Java赋值问题,如下
- maven实现按需打包指定接口
- 宏定义
- Ansible入门基础
- 软考嵌入式系统设计师2011年上午试题总结
- AngularJS实现对用户信息的增删改查
- 从经济学博士到爬坑机器学习十年,微软首席数据科学家谢梁的AI故事
- 委托的学习以及使用
- 笔记:关于hibernate在dao层要导入的包
- 史上最简单的react脚手架搭建
- linux 环境下JDK的安装+环境变量配置
- 【C#与.NET程序设计】(4)- C#类及OOP
- POI使用案例02---向excel中写入数据
- OPENCV3+VS2015配置教程