表格的添加修改(综合题)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习</title>
    <style>
        .addUser{
            width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
        }
    </style>
    <script src="angular1.4.6.min.js"></script>
    <script src="http://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.ageSize = "";
            $scope.users = [
                {"id":1,"name":"张三","pwd":"123","age":22,"sex":""},
                {"id":2,"name":"李四","pwd":"456","age":33,"sex":""},
                {"id":3,"name":"王五","pwd":"789","age":44,"sex":""}
            ];
            //定义页面跳转方法
            $scope.goToUrl = function(path){
                alert(path);
                $location.path(path);
            }


            $scope.ageTest = function(age,ageSize){
                //alert(ageSize);
                //alert(age);
                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;
                }


            }

        });
        //自定义年龄控制器
        app.filter("ageFilter",function(){
            return function(user){
                alert(user);
                /*if(user.age<20 || user.age>22){
                    return null;
                }else{
                    return user;
                }*/
            }
        });

        //定义添加用户控制器
        app.controller("addUserCtrl",function($scope){
            //alert("添加用户控制器");
            $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){
            //alert("修改控制器");
            $scope.name = $routeParams.name;
            $scope.oldPwd = "";
            $scope.pwd1 = "";
            $scope.pwd2 = "";
            //alert($scope.name);
            $scope.updatePwd = function(){
                //alert(pwd1);
                /*if($scope.pwd1 != $scope.pwd2){
                    alert("两次密码不一致 ");
                }*/

                for(index in $scope.users){
                    //alert($scope.users[index].name);
                    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 placeholder="用户名查询" size="10" />&nbsp;
        <!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>-->
        年龄:<select id="age" ng-model="ageSize" ng-init="ageSize='--请选择--'">
        <option>--请选择--</option>
        <option>11-20</option>
        <option>21-30</option>
        <option>31-40</option>
        <option>41-50</option>
        <option>51-60</option>
    </select>&nbsp;
        性别:<select>
        <option></option>
        <option></option>
    </select>&nbsp;
        <input type="button" value="全部删除" />
        <input 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 " ng-if="ageTest(user.age,ageSize)">
                <td><input type="checkbox"/> </td>
                <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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值