用户1

来源：互联网发布：部落冲突气球数据编辑：程序博客网时间：2024/05/19 23:56
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>综合练习</title>    <style>        .addUser{            width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;        }    </style>    <script type="text/javascript" src="angular-1.3.0.js" ></script>    <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>    <script type="text/javascript">        var app = angular.module("myApp",["ngRoute"]);        //使用config配置路由规则        app.config(["$routeProvider",function($routeProvider){            $routeProvider                    .when("/addUser",{                        controller:"addUserCtrl",                        templateUrl:"addUser.html"                    })                    .when("/updatePwd/:name",{                        controller:"updatePwdCtrl",                        templateUrl:"updatePwd.html"                    })                    .otherwise({redirectTo:"/addUser"});        }]);        app.controller("myCtrl",function($scope,$location){            $scope.users = [                {"id":1,"name":"张三","pwd":"123","age":20,"sex":"男"},                {"id":2,"name":"李四","pwd":"456","age":33,"sex":"女"},                {"id":3,"name":"王五","pwd":"789","age":42,"sex":"男"}            ];            //定义页面跳转方法            $scope.goToUrl = function(path){                alert(path);                $location.path(path);            }            //全部删除            $scope.del=function(){                if(confirm("确实删除吗？")){                    $scope.users=[];                }            };            $scope.ageTest=function(age,agesize){                if(agesize !="--请选择--"){                    var ages=agesize.split("-");                    var ageMin=ages[0];                    var ageMax=ages[1];                    if(age<ageMin || age>ageMax){                        return false;                    }else{                        return true;                    }                }else{                    return true;                }            }            //批量删除            $scope.deleteSel=function(){                var userNames=[];                for(index in $scope.users){                    if($scope.users[index].state == true){                        userNames.push($scope.users[index].name);                    }                }                if(userNames.length>0){                    if(confirm("是否删除选中项？")){                        for(i in userNames){                            var name=userNames[i];                            for(i2 in $scope.users){                                if($scope.users[i2].name==name){                                    $scope.users.splice(i2,1);                                }                            }                        }                    }                }else{                    alert("请选择删除的项")                }            }        });        //定义添加用户控制器        app.controller("addUserCtrl",function($scope){            $scope.name = "";            $scope.pwd = "";            $scope.pwd2 = "";            $scope.age = "";            $scope.sex = "";            $scope.sub = function(){                var newUser = {                    id:$scope.users.length + 1,                    name:$scope.name,                    pwd:$scope.pwd,                    age:$scope.age,                    sex:$scope.sex                }                //添加新用户.                $scope.users.push(newUser);            }        });        //定义修改用户控制器        app.controller("updatePwdCtrl",function($scope,$routeParams){            $scope.name = $routeParams.name;            $scope.oldPwd = "";            $scope.pwd1 = "";            $scope.pwd2 = "";            $scope.updatePwd = function(){                for(index in $scope.users){                    if($scope.users[index].name==$scope.name){                        $scope.users[index].pwd=$scope.pwd1;                    }                }            }        });    </script></head><body ng-app="myApp" ng-controller="myCtrl"><center>    <h3>用户信息表</h3>    <div>        <input ng-model="search" placeholder="用户名查询"  size="10" />        年龄：<select id="age" ng-model="agesize" ng-init="agesize='--请选择--'">        <option>--请选择--</option>        <option>19-30</option>        <option>31-40</option>        <option>41-50</option>    </select>        性别：<select>        <option>男</option>        <option>女</option>    </select>        <input type="button" value="全部删除"  ng-click="del()"/>        <input ng-click="deleteSel()" type="button" value="批量删除"/>    </div><br />    <div>        <table border="1" cellspacing="1" cellpadding="10">            <thead>            <tr>                <th><input type="checkbox"</th>                <th>id</th>                <th>用户名</th>                <th>密码</th>                <th>年龄</th>                <th>性别</th>                <th>操作</th>            </tr>            </thead>            <tbody>            <tr ng-repeat="user in users | filter:{'name':search}" ng-if="ageTest(user.age,agesize)">                <th><input ng-model="user.state" type="checkbox"</th>                <td>{{user.id}}</td>                <td>{{user.name}}</td>                <td>{{user.pwd}}</td>                <td>{{user.age}}</td>                <td>{{user.sex}}</td>                <td><button ng-click="goToUrl('/updatePwd/'+user.name)">修改密码</button> </td>            </tr>            </tbody>        </table>    </div><br />    <button class="addUser" ng-click="goToUrl('/addUser')">添加用户</button><br /><br />    <!-- 1.添加用户页面 -->    <script type="text/ng-template" id="addUser.html">        <form action="">            <table border="1" cellspacing="1" cellpadding="10">                <tr>                    <th>用户名：</th>                    <td><input ng-model="name" placeholder="请输入用户名" /></td>                </tr>                <tr>                    <th>密　码：</th>                    <td><input ng-model="pwd" placeholder="请输入密码" /></td>                </tr><tr>                <th>年　龄：</th>                <td><input ng-model="age" placeholder="请输入年龄" /></td>            </tr><tr>                <th>性　别：</th>                <td><input ng-model="sex" placeholder="请输入性别" /></td>            </tr>                <tr align="center">                    <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>                </tr>            </table>        </form>    </script>    <!-- 2.修改用户信息页面 -->    <script type="text/ng-template" id="updatePwd.html">        <form>            <table border="1" cellspacing="1" cellpadding="10">                <tr>                    <th>用户名：</th>                    <td><input disabled="disabled" ng-model="name" placeholder="请输入用户名"  /></td>                </tr>                <tr>                    <th>旧密码：</th>                    <td><input ng-model="oldPwd" placeholder="请输入密码" /></td>                </tr><tr>                <th>新密码：</th>                <td><input ng-model="pwd1" placeholder="请输入密码"  /></td>            </tr><tr>                <th>确认：</th>                <td><input ng-model="pwd2" placeholder="请输入密码"  /></td>            </tr>                <tr align="center">                    <td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td>                </tr>            </table>        </form>    </script>    <!-- 6.指定相应内容 -->    <div ng-view>    </div></center></body></html>
阅读全文
0 0