<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular-1.3.0.js"></script> <script type="text/javascript" src="jquery.1.12.4.js"></script> <script> var app = angular.module("myapp",[]); app.controller("myctrl",function($scope){ //赋初始值 $scope.persons = []; //页面隐藏 $scope.h=true; $scope.hh=true; //点击-添加的表格弹出 $scope.tj = function(){ $scope.h=false; $scope.hh=true; } //点击-修改的表格弹出 $scope.xg = function(a){ $scope.h=true; $scope.hh=false; $scope.yh=$scope.persons[a].yhm; $scope.aw=a;//赋值-传过来的索引 } $scope.tj1 = function(){ if ($scope.yhm != null&&$scope.yhm!="") { if($scope.mm!=null&&$scope.mm.length>=6){ if($scope.nl>10&&$scope.nl<60){ if($scope.xb=="男"||$scope.xb=="女"){ $scope.persons.push({yhm:$scope.yhm,mm:$scope.mm,nl:$scope.nl,xb:$scope.xb}); $scope.h=true; $scope.yhm=""; $scope.mm=""; $scope.nl=""; $scope.xb=""; }else{ alert("性别不符"); return; } }else{ alert("年龄不符"); return; } }else { alert("密码长度不符"); return; } }else{ alert("用户名不能为空"); return; } } $scope.tj2 = function(){ if($scope.persons[$scope.aw].mm==$scope.m){ if($scope.m2!=null&&$scope.m2!=""&&$scope.m2.length>=6){ if($scope.m2==$scope.m3){ $scope.persons[$scope.aw].mm = $scope.m2; $scope.hh=true; $scope.yh=""; $scope.m=""; $scope.m2=""; $scope.m3=""; }else{ alert("两次密码不一致"); return; } }else{ alert("长度需要大于6"); return; } }else { alert("旧密码输入错误"); return; } } //查询实现的功能 var op = $scope.persons;//获取一个新的数组 $scope.selects = function(){ $scope.persons = [];//原先的数组清空 for (var i in op) {//遍历新的数组 if (op[i].yhm == $scope.name) { //添加一条数据 $scope.persons.push(op[i]); } } //如果什么都不输入,把原先的数据添加回去 if($scope.name==null||$scope.name==""){ //原先被清空的数组=新的数组 新的数组的值是原先没有被清空之前的 $scope.persons=op; } } //全部删除 $scope.deletes = function(){ $scope.persons = []; } //批量删除 $scope.deletes2 = function(){ for(var i=0;i<$scope.persons.length;i++){ $("input[name='check']").each(function () { if(this.checked){ $scope.persons.splice(i,1); } }); } } //全选全不选 $(function(){ $("#c").click(function(){ //获取最上面的选中状态 var check = this.checked; //遍历 $("input[name='check']").each(function () { this.checked = check; }); }); }); }); </script> <style> table{ margin-top: 40px; } .q{ text-align: center; } .tj{ background-color: #007aff; width: 80px; height: 50px; margin-left: 900px; margin-top: 30px; } .table1{ position: absolute; left: 750px; top: 550px; } .table2{ position: absolute; left: 750px; top: 550px; } </style> </head> <body ng-app="myapp" ng-controller="myctrl"> <h1 align="center">用户信息表</h1> <div align="center"> <input type="text" placeholder="用户名查询" ng-change="selects()" ng-model="name"> 年龄:<select> <option>--请选择--</option> <option>10~20</option> <option>21~30</option> <option>31~40</option> <option>41~50</option> <option>51~60</option> </select> 性别:<select ng-model="nnv"> <option>男</option> <option>女</option> </select> <button ng-click="deletes()">全部删除</button> <button ng-click="deletes2()">批量删除</button> </div> <table border="1" align="center" width="40%" cellpadding="10" cellspacing="0"> <tr> <th><input type="checkbox" id="c"></th> <th>id</th> <th>用户名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr ng-repeat="person in persons | filter:{'xb':nnv}"><!-- 过滤器实现了性别查询,名称查询在上面 --> <td class="q"><input type="checkbox" name="check"></td> <td class="q">{{$index+1}}</td> <td class="q">{{person.yhm}}</td> <td class="q">{{person.mm}}</td> <td class="q">{{person.nl}}</td> <td class="q">{{person.xb}}</td> <td class="q"><button ng-click="xg($index)">修改密码</button></td> </tr> </table> <button class="tj" ng-click="tj()">添加用户</button> <table border="1" align="center" width="20%" cellpadding="10" cellspacing="0" class="table1" ng-hide="h"> <tr> <th>用户名:</th> <td><input type="text" placeholder="请输入用户名" ng-model="yhm"></td> </tr> <tr> <th>密 码:</th> <td><input type="text" placeholder="请输入密码" ng-model="mm"></td> </tr> <tr> <th>年 龄:</th> <td><input type="text" placeholder="请输入年龄" ng-model="nl"></td> </tr> <tr> <th>性 别:</th> <td><input type="text" placeholder="请输入性别" ng-model="xb"></td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="提交" ng-click="tj1()"> </td> </tr> </table> <table border="1" align="center" width="20%" cellpadding="10" cellspacing="0" class="table2" ng-hide="hh"> <tr> <th>用户名:</th> <td><input type="text" ng-model="yh" disabled></td> </tr> <tr> <th>旧密码:</th> <td><input type="text" placeholder="请输入旧密码" ng-model="m"></td> </tr> <tr> <th>新密码:</th> <td><input type="text" placeholder="请输入新密码" ng-model="m2"></td> </tr> <tr> <th>确 认:</th> <td><input type="text" placeholder="请确认密码" ng-model="m3"></td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="提交" ng-click="tj2()"> </td> </tr> </table> </body> </html>
html5_angular+jquery用户列表
最新推荐文章于 2021-06-23 07:40:57 发布