添加查询

最新推荐文章于 2022-02-18 16:08:02 发布
qq_40072139
最新推荐文章于 2022-02-18 16:08:02 发布
阅读量311
点赞数
本文链接：https://blog.csdn.net/qq_40072139/article/details/78314958
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <title>用户信息表</title>
    <style>
        #bod{
            width: 900px;
            margin: 0 auto;
        }
        #numbl1{
            margin: 0 auto;
        }
        #numbl1 div{
            float: left;
        }
    </style>
    <script type="text/javascript">
        var app=angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.user=[
                {id:1,
                    name:"张三",
                    passWord:123,
                    old:"22",
                    sex:"男",
                    check:false},
                {id:2,
                    name:"李四",
                    passWord:234,
                    old:"33",
                    sex:"女",
                    check:false},
                {id:3,
                    name:"王五",
                    passWord:123,
                    old:"22",
                    sex:"男",
                    check:false}
            ]
            var id=3;
            $scope.add=function(){
               if($scope.name1!=null&&$scope.name1!=""&&$scope.name1!=undefined&&$scope.pass!=null&&$scope.pass!=""&&$scope.pass!=undefined&&$scope.age!=null&&$scope.age!=""&&$scope.age!=undefined&&$scope.sex1!=null&&$scope.sex1!=""&&$scope.sex1!=undefined){
                   $scope.user.push({
                       id:++id,
                       name:$scope.name1,
                       passWord:$scope.pass,
                       old:$scope.age,
                       sex:$scope.sex1,
                       check:false
                   })
                   $scope.name1="";
                   $scope.pass="";
                   $scope.age="";
                   $scope.sex1="";
                   $scope.addUserIsShow=false;
               }else{
                   alert("所填项不能为空！");
               }

            };
            $scope.editUserhehe=function(){

                if($scope.oldpass!=null&&$scope.oldpass!=""&&$scope.oldpass!=undefined&&$scope.newpass!=null&&$scope.newpass!=""&&$scope.newpass!=undefined&&$scope.ispass!=null&&$scope.ispass!=""&&$scope.ispass!=undefined) {
                    if($scope.oldpass==$scope.user[$scope.index].passWord){
                        if($scope.newpass==$scope.ispass){
                            $scope.user[$scope.index].passWord=$scope.ispass;
                        }else{
                            alert("两次密码输入不一致！")
                        }
                    }else{
                        alert("密码输入错误");
                    }
                }else{
                    alert("所填项不能为空！")
                }
            }
            var old_user=$scope.user;
            $scope.gaibian=function(){
                $scope.user=[];
                for(var i in old_user){
                    if(old_user[i].name==$scope.n_name){
                        $scope.user.push(old_user[i]);
                    }
                    if($scope.n_name==null||$scope.n_name==""||$scope.n_name==undefined){
                        $scope.user.push(old_user[i]);
                    }
                }

            }
            $scope.addUser=function(){
                $scope.addUserIsShow=true;
            }
            $scope.editUser=function(index){
                $scope.editUserIsShow=true;
                $scope.index=index;
                $scope.name2= $scope.user[index].name;

            }


        })



    </script>
</head>
<body ng-app="myApp">
<div id="bod" ng-controller="myCtrl">
<h2 style="margin: 10px auto 0 auto;width: 150px">用户信息表</h2>
<div id="numbl1">
    <div><input type="text" ng-model="n_name" ng-change="gaibian()" placeholder="用户名查询">&nbsp;</div>
    <div>
        年龄: <select>
        <option>--请选择--</option>
        <option>10</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
        <option>50</option>
        <option>60</option>
    </select>&nbsp;
</div>
   <div> 性别:
    <select>
        <option>男</option>
        <option>女</option>
    </select>&nbsp;
</div>
    <button id="allDelete">全部删除&nbsp;</button>
<button id="selectDelete">批量删除</button>
    <div style="clear: both"></div>
</div>
    <table border="1px" style="width: 700px;margin: 0 auto" align="center">
        <tr>
            <td><input type="checkbox" ng-model="allcheck" ng-click="checkall()"></td>
            <td>ID</td>
            <td>用户名</td>
            <td>密码</td>
            <td>年龄</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr ng-repeat="u in user" ng-show="isShow($index)">
            <td><input type="checkbox" ng-model="allcheck" ng-click="checkall()"></td>
            <td>{{u.id}}</td>
            <td>{{u.name}}</td>
            <td>{{u.passWord}}</td>
            <td>{{u.old}}</td>
            <td>{{u.sex}}</td>
            <td><button ng-click="editUser($index)">修改密码</button></td>
        </tr>
    </table>
    <div style="margin-left: 40%"><button ng-click="addUser()">添加用户</button></div>
    <div ng-show="addUserIsShow" style="margin-left: 25%">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" ng-model="name1"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" ng-model="pass"></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input type="text" ng-model="age"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="text" ng-model="sex1"></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><button ng-click="add()">提交</button></td>
            </tr>
        </table>
    </div>
    <div ng-show="editUserIsShow" style="margin-left: 25%">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" ng-model="name2" disabled></td>
            </tr>
            <tr>
                <td>旧密码</td>
                <td><input type="text" ng-model="oldpass"></td>
            </tr>
            <tr>
                <td>新密码</td>
                <td><input type="text" ng-model="newpass"></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="text" ng-model="ispass"></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><button ng-click="editUserhehe()">提交</button></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>