angular实现简单的用户信息表

来源：互联网发布：网络灰色收入路子编辑：程序博客网时间：2024/06/01 08:38
一.实现要求
1. 搭建页面
2. 显示所有用户信息
3. 根据用户名实现用户查询显示
4. 根据年龄范围下拉菜单实现用户显示
5. 根据用户年龄实现用户显示
6. 实现批量删除功能：选中左侧多选框，点击批量删除，删除选中项，没选中提示用户，点击最上方的多选框，实现全选。
7. 点击添加用户，下方页面显示添加用户界面，填写用户信息，满足条件如下进行添加
a) 用户名非空
b) 两次密码一致
c) 年龄在10到60之间
8. 点击修改密码按钮，下方页面显示修改密码页面（如下），默认把要修改的用户名显示在用户名输入框，并且不能更改用户名，实现密码修改，要求如下
a) 旧密码要跟之前的密码一致
b) 两次输入的密码一致。
二.实现的代码
<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <script type="text/javascript" src="angular.js"></script>    <script type="text/javascript" src="angular-route.js"></script>    <script>        var app=angular.module("myApp",["ngRoute"]);        var user=[            {                "id":1,                "name":"小明",                "pwd":111,                "age":20,                "sex":"女",                "state":false            },            {                "id":2,                "name":"小李",                "pwd":222,                "age":5,                "sex":"女",                "state":false            },            {                "id":3,                "name":"小红",                "pwd":333,                "age":55,                "sex":"男",                "state":false            }        ];        app.value("user",user);        app.config(["$routeProvider",function($routeProvider){            $routeProvider                    .when("/addUser",{                        controller:"myCtrl",                        templateUrl:"addUser.html"                    })                    .when("/updatePwd",{                        controller:"myCtrl",                        templateUrl:"updatePwd.html"                    }).otherwise({redirectTo:"/addUser"});        }]);        app.controller("myCtrl",function($scope,user,$location){            //先拿到数组            $scope.user=user;            //删除全部            $scope.delete=function(){                $scope.user.splice($scope.user);            }            //定义页面跳转方法            $scope.goToUrl=function(path){                $location.path(path);            };            $scope.goToUrl2=function(path){                $location.path(path);            };            //添加用户信息            $scope.add=function(){                for(var i=2;i<$scope.user.length;i++) {                    $scope.id = $scope.user[0].id+$scope.user[0+i].id;                }                var newuser=                {                    id:$scope.id,                    name:$scope.name,                    pwd:$scope.pwd,                    age:$scope.age,                    sex:$scope.sex                };                if(!$scope.name==""){                    if(10<$scope.age && $scope.age<60){                        //将新数组中的信息放到user数组中                        $scope.user.push(newuser);                    }else{                        alert("年龄不符");                    }                }else{                    alert("用户名不能为空");                }            };            //修改用户信息            var i=0;            $scope.update=function($index){                //将旧密码的值取到//                $scope.oldpwd=$scope.user[$index].pwd;                //将用户名取到                $scope.newname=$scope.user[$index].name;                //拿到数组的下标                if($scope.oldpwd == $scope.user[$index].pwd){                        i=$index;                }            };            //提交            $scope.sum=function(){                if($scope.newpwd == $scope.againpwd){                    //就是将新密码赋值给数组里的就密码                    $scope.user[i].pwd=$scope.newpwd;                }else{                    alert("两次密码不一致");                }            };            //全选按钮            $scope.gou=function () {                for(var i=0;i<$scope.user.length;i++) {                    if($scope.checkAll==true) {                        $scope.user[i].state=true;                    } else {                        $scope.user[i].state=false;                    }                }            }            //批量删除            $scope.deleteSel = function(){                var userNames = [];                //遍历users数组，获取状态是选中的user对象的名字                for(index in $scope.user){                    if($scope.user[index].state == true){                        userNames.push($scope.user[index].name);                    }                }                if(userNames.length>0){                    if(confirm("是否删除选中项？")){                        for(i in userNames){                            var name = userNames[i];                            for(i2 in $scope.user){                                if($scope.user[i2].name == name){                                    $scope.user.splice(i2,1);                                }                            }                        }                    }                }else{                    alert("请选择删除项");                }            }        });    </script>    <title></title>    <style>        .t{            width: 500px;            height: 200px;            text-align: center;            margin: 30px 10px;        }        .add{            background-color: #4bdaff;            width: 100px;            height: 50px;font-size: 20px;            margin-bottom: 30px;        }        .t2{            width: 300px;            height: 200px;            text-align: center;        }    </style></head><body ng-app="myApp" ng-controller="myCtrl"><center>    <h1 align="center">用户信息表</h1>    <div>        <input type="text" placeholder="用户名查询" ng-model="queryname"/>        年龄:<input type="text" placeholder="年龄范围查询" ng-model="queryage"/>        性别:<select ng-model="querysex">                <option>女</option>                <option>男</option>             </select>        <button ng-click="delete()">全部删除</button>        <button ng-click="deleteSel()">批量删除</button>    </div>    <div>        <table cellspacing="0" cellpadding="0" border="1" class="t">            <tr>                <th><input type="checkbox" ng-click="gou()" ng-model="checkAll"></th>                <th>ID</th>                <th>用户名</th>                <th>密码</th>                <th>年龄</th>                <th>性别</th>                <th>操作</th>            </tr>            <!--<input type="checkbox" ng-model="x.state"/>-->            <tr ng-repeat="x in user|filter:{'name':queryname}|filter:{'age':queryage}|filter:{'sex':querysex}">                <td><input type="checkbox" ng-model="x.state"></td>                <td>{{x.id}}</td>                <td>{{x.name}}</td>                <td>{{x.pwd}}</td>                <td>{{x.age}}</td>                <td>{{x.sex}}</td>                <td><button ng-click="goToUrl2('/updatePwd');update($index)">修改密码</button></td>            </tr>        </table>    </div>    <div><button ng-click="goToUrl('/addUser')" class="add">添加用户</button></div>    <script type="text/ng-template" id="addUser.html">        <form action="#">            <table border="1" cellspacing="0" cellpadding="0" class="t2">                <tr>                    <td>用户名：</td>                    <td><input type="text" placeholder="请输入用户名" ng-model="name"/></td>                </tr>                <tr>                    <td>密码：</td>                    <td><input type="text" placeholder="请输入密码" ng-model="pwd"/></td>                </tr>                <tr>                    <td>年龄：</td>                    <td><input type="text" placeholder="请输入年龄" ng-model="age"/></td>                </tr>                <tr>                    <td>性别：</td>                    <td><input type="text" placeholder="请输入性别" ng-model="sex"/></td>                </tr>                <tr>                    <td colspan="2" align="center"><button ng-click="add()">提交</button></td>                </tr>            </table>        </form>    </script>    <script type="text/ng-template" id="updatePwd.html" >        <form>            <table border="1" cellspacing="0" cellpadding="0" class="t2">                <tr>                    <td>用户名：</td>                    <td><input type="text" placeholder="张三" ng-model="newname"/></td>                </tr>                <tr>                    <td>旧密码：</td>                    <td><input type="text" placeholder="请输入旧密码" ng-model="oldpwd"/></td>                </tr>                <tr>                    <td>新密码：</td>                    <td><input type="text" placeholder="请输入新密码" ng-model="newpwd"/></td>                </tr>                <tr>                    <td>确认密码：</td>                    <td><input type="text"  placeholder="请确认新密码" ng-model="againpwd" /></td>                </tr>                <tr>                    <td colspan="2" align="center"><button ng-click="sum()">提交</button></td>                </tr>            </table>        </form>    </script>    <div ng-view>    </div></center></body></html>
阅读全文
0 0