html5_angular+jquery用户列表

AngularJS用户信息管理
最新推荐文章于 2021-06-23 07:40:57 发布
原创最新推荐文章于 2021-06-23 07:40:57 发布 · 592 阅读
0 ·
CC 4.0 BY-SA版权
本文介绍了一个使用AngularJS实现的用户信息管理系统，该系统具备添加、修改、查询和删除用户信息的功能，并通过前端验证确保数据的有效性和一致性。
<!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>