用户信息表

最新推荐文章于 2024-07-08 02:26:59 发布
W1256754982
最新推荐文章于 2024-07-08 02:26:59 发布
阅读量1.9k
点赞数 1
本文链接：https://blog.csdn.net/W1256754982/article/details/78312479
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>模拟考</title>
    <style type="text/css">
        table{
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000000;
        }
    </style>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <script type="text/javascript">
        var app=angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.data=[
                {
                    id:1,
                    name:"zhangsan",
                    pwd:"123",
                    age:12,
                    sex:"男"
                },
                {
                    id:2,
                    name:"李四",
                    pwd:"345",
                    age:22,
                    sex:"女"
                },
                {
                    id:3,
                    name:"王五",
                    pwd:"000",
                    age:30,
                    sex:"男"
                }
            ];
            //全选
            $scope.checkstate=false;
            $scope.checkAll=function(){
                if($scope.checkstate==true){
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=true;
                    }
                }else{
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=false;
                    }
                }
            }
            //反选
            var a=0;
            $scope.checkLL=function(index){
                if($scope.data[index].check==true){
                    a++;
                }else{
                    a--;
                }
                console.log($scope.data.length);
                if(a==$scope.data.length){
                    $scope.checkstate=true;
                }else{
                    $scope.checkstate=false;
                }
            }
            //删除
            $scope.del=function(){
                for(var i=0;i<$scope.data.length;i++){
                    if($scope.data[i].check==true){
                        $scope.data.splice(i,1);
                        i--;
                    }
                }
            }
            //全部删除
            $scope.delAll=function(){
                $scope.data=[];
                $scope.checkstate=false;
            }
            var id=4;
            //点击添加  显示添加框
            $scope.addName = function(){
                $scope.addname_is_Show=true;

            };
            //点击提交  添加字符串
            $scope.tijiao=function(){
                $scope.data.push({
                    id:id++,
                    name:$scope.name,
                    pwd:$scope.pwd,
                    age:$scope.age,
                    sex:$scope.sex
                });
                $scope.name="";
                $scope.pwd="";
                $scope.age="";
                $scope.sex="";
                $scope.addname_is_Show=false;

            }
            //点击修改密码按钮
            $scope.updpwd=function(index){
                var user=$scope.data[index];
                $scope.u_name=user.name;
                $scope.u_old_pwd=user.pwd;
                $scope.u_new_pwd="";
                $scope.u_sex="";
                $scope.upd_is_Show=true;
                //获取所在的下标
                $scope.index=index;
            }
            //点击修改中的提交按钮
            $scope.xiugai=function(){
                //判断两次输入的密码是否相同
                if($scope.u_new_pwd!=$scope.u_queren){
                    alert("两次输入密码不一致");
                    return;
                }

                //判断老密码是否与新密码相同
                if($scope.u_old_pwd==$scope.u_new_pwd){
                    alert("旧密码与新密码相同,请重新输入");
                    return;
                }

                //根据下标修改
                $scope.data[$scope.index].pwd=$scope.u_new_pwd;
                $scope.upd_is_Show=false;
            }
            //先给数据赋值给一个数组
            var old_data=$scope.data;
            //输入框搜索
            $scope.searchByName=function(){
                //让以前的数组为空
                $scope.data=[];
                //遍历有数据的数组
                for(var i in old_data){
                    //判断数组中的名字是否跟输入的名字相同
                    if(old_data[i].name==$scope.s_name){
                        //把查询的数据追加到最初的数组
                        $scope.data.push(old_data[i]);
                    }
                }
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
用户信息表<br>
<input type="text" ng-model="s_name" ng-change="searchByName()">年龄:<select><option>__请选择__</option></select>性别<select><option>男</option><option>女</option></select><button ng-click="delAll()">全部删除</button><button ng-click="del()">批量删除</button>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" ng-model="checkstate" ng-click="checkAll()"></th>
        <th>id</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data">
        <td><input type="checkbox" ng-click="checkLL($index)" ng-model="item.check"></td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.pwd}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td><button ng-click="updpwd($index)">修改密码</button></td>
    </tr>
    </tbody>
</table>
<button ng-click="addName()">添加用户</button>
    <table id="addname" ng-show="addname_is_Show">
        <tr>
            <td>用户名:</td>
            <td><input type="text" ng-model="name" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="text" ng-model="pwd" placeholder="请输入密码"></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input type="text" ng-model="age" placeholder="请输入年龄"></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td><input type="text" ng-model="sex" placeholder="请输入性别"></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><button ng-click="tijiao()">提交</button></td>
        </tr>
    </table>
<table ng-show="upd_is_Show">
    <tr>
        <td>用户名:</td>
        <td><input type="text" ng-model="u_name" disabled></td>
    </tr>
    <tr>
        <td>旧密码:</td>
        <td><input type="text" ng-model="u_old_pwd" disabled ></td>
    </tr>
    <tr>
        <td>新密码:</td>
        <td><input type="text" ng-model="u_new_pwd" placeholder="请输入新密码"></td>
    </tr>
    <tr>
        <td>性别:</td>
        <td><input type="text" ng-model="u_queren"  placeholder="确认密码"></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><input type="button" ng-click="xiugai()" value="提交"></td>
    </tr>
</table>
</body>
</html>