AngularJS+用户查询+添加用户+修改密码
来源：互联网 发布：网络象棋需求分析 编辑：程序博客网 时间：2024/06/04 18:19
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularJS+添加用户+修改密码</title> <style> *{ margin: 0 auto; } .box{ width: 800px; height: 1000px; } </style> <script src="../angular-1.5.5/angular.min.js"></script> <script> var app = angular.module("myapp",[]); app.controller("mycont",function ($scope) { //数据 $scope.data = [{ done:false, name:"张三", pass:123, age:22, sex:"女" },{ done:false, name:"李四", pass:456, age:44, sex:"男" },{ done:false, name:"王五", pass:789, age:33, sex:"女" },{ done:false, name:"赵六", pass:234, age:55, sex:"男" }] //根据年龄范围下拉菜单实现用户显示 $scope.ageSize = "--请选择--"; $scope.ageFilter = function (item) { if ($scope.ageSize != "--请选择--"){ var ageSize = $scope.ageSize; var arr = ageSize.split("-"); var min = arr[0]; var max = arr[1]; var age = item.age; if(age<min || age>max){ return false; } else { return true; } } else { return true; } } //全部删除 $scope.delAll = function () { $scope.data = []; } //批量删除 $scope.del = function () { var n = 0; if (confirm("是否删除？")) { for(var i=0;i<$scope.data.length;i++){ if ($scope.data[i].done == true){ $scope.data.splice(i,1); i--; n++; } } } if (n==0) { alert("请勾选。。。"); } } //全选 $scope.checkAll = function () { for(var i=0;i<$scope.data.length;i++){ if ($scope.check == true){ $scope.data[i].done = true; n=$scope.data.length; } else { $scope.data[i].done = false; } } } //反全选 var n = 0; $scope.fx = function (index) { if ($scope.data[index].done == true){ n++; } else { n--; } console.log(n); /*console.log($scope.data.length);*/ if (n==$scope.data.length) { $scope.check = true; } else { $scope.check = false; } } //添加用户 $scope.show = false; $scope.add = function () { $scope.show = true; } $scope.tj = function () { if($scope.addname!=null&&$scope.addage>10&&$scope.addage<60){ $scope.data.push({done:false,name:$scope.addname,pass:$scope.addpass,age:$scope.addage,sex:$scope.addsex}); } else { alert("不满足条件"); } $scope.addname=""; $scope.addpass=""; $scope.addage=""; $scope.addsex=""; $scope.show = false; } //修改密码 $scope.shows = false; $scope.up = function (index) { $scope.shows = true; var data = $scope.data[index]; $scope.name = data.name; $scope.index = index; } $scope.tjpass = function () { if ($scope.data[$scope.index].pass != $scope.pass) { alert("旧密码输入不符"); return; } else if ($scope.uppass != $scope.upsure) { alert("两次新密码输入不一致"); return; } $scope.data[$scope.index].pass = $scope.uppass; $scope.name =""; $scope.pass=""; $scope.uppass=""; $scope.upsure=""; $scope.shows = false; } }) </script></head><body ng-app="myapp" ng-controller="mycont"><div class="box"> <br> <h2 style="padding-left: 300px">用户信息表</h2> <br> <div style="padding-left: 100px"> <input type="text" placeholder="用户名查询" ng-model="search"> 年龄 : <select ng-model="ageSize"> <option>--请选择--</option> <option>11-20</option> <option>21-30</option> <option>31-40</option> <option>41-50</option> <option>51-60</option> </select> 性别 : <select ng-model="sear"> <option></option> <option>男</option> <option>女</option> </select> <button ng-click="delAll()">全部删除</button> <button ng-click="del()">批量删除</button> </div> <br/> <table cellpadding="10" cellspacing="1" border="soild 1px #000"> <tr> <th><input type="checkbox" ng-click="checkAll()" ng-model="check">全选</th> <th>ID</th> <th>用户名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr ng-repeat="item in data|filter:{name:search}|filter:{sex:sear}|filter:ageFilter"> <td><input type="checkbox" ng-model="item.done" ng-click="fx($index)"></td> <td>{{$index+1}}</td> <td>{{item.name}}</td> <td>{{item.pass}}</td> <td>{{item.age}}</td> <td>{{item.sex}}</td> <td><button ng-click="up($index)">修改密码</button></td> </tr> </table> <br/><br/> <div style="width: 100px; height: 60px;"><button ng-click="add()">添加用户</button></div> <div ng-show="show"> <table cellpadding="10" cellspacing="1" border="soild 1px #000"> <tr> <td>用户名:</td> <td><input type="text" placeholder="请输入用户名" ng-model="addname"></td> </tr> <tr> <td>密码:</td> <td><input type="text" placeholder="请输入密码" ng-model="addpass"></td> </tr> <tr> <td>年龄:</td> <td><input type="text" placeholder="请输入年龄" ng-model="addage"></td> </tr> <tr> <td>性别:</td> <td><input type="text" placeholder="请输入性别" ng-model="addsex"></td> </tr> <tr align="center"> <td colspan="2"><button ng-click="tj()">提交</button></td> </tr> </table> </div> <div ng-show="shows"> <table cellpadding="10" cellspacing="1" border="soild 1px #000"> <tr> <td>用户名:</td> <td><input type="text" placeholder="用户名" ng-model="name"></td> </tr> <tr> <td>旧密码:</td> <td><input type="text" placeholder="旧密码" ng-model="pass"></td> </tr> <tr> <td>新密码:</td> <td><input type="text" placeholder="新密码" ng-model="uppass"></td> </tr> <tr> <td>确认:</td> <td><input type="text" placeholder="请确认" ng-model="upsure"></td> </tr> <tr align="center"> <td colspan="2"><button ng-click="tjpass()">提交</button></td> </tr> </table> </div> <p></p></div></body></html>
阅读全文
0 0
- AngularJS+用户查询+添加用户+修改密码
- AngularJS用户添加,密码修改
- AngularJS 用户名查询、年龄查询、性别查询、全部删除、批量删除、添加用户、修改密码
- 表格全选/添加/查询用户/修改密码
- （angularjs） 数据的增删改查（添加用户，查询年龄，批量删除，全部删除，修改密码） 类似题
- 添加vcenter用户修改密码
- svn 添加用户，修改密码，删除用户
- angularjs 前端页面之用户修改密码
- angularjs-查询.删除,添加数据,修改密码
- MySql中添加用户,用户授权,删除用户,修改密码
- Linux添加用户，修改密码，修改用户权限
- VSS中添加用户与修改密码
- VisualSVN2.1.3添加用户修改密码功能
- linux添加用户与修改密码
- mysql添加用户 修改密码等
- linux添加用户和修改密码
- Mysql 用户添加、密码修改、授权等
- svn用户添加、密码修改、删除
- Maven下载慢解决方法
- JavaScript 开发人员需要知道的简写技巧
- 使用python的logging模块
- 图像基础17 图像滤波与除噪——高斯滤波、双边滤波
- 用Bmob搭建简单的服务器
- AngularJS+用户查询+添加用户+修改密码
- 表单判断页面html
- angular的添加查找表格
- confirm
- plus-one:数组模拟的大数+1
- 熊猫学猿--（第八竹--循环 for、foreach）
- 新媒行面试指南
- ftp工作原理详解
- 怎样写工科研究生论文
