angularjs添加用户

最新推荐文章于 2022-11-04 20:10:47 发布

Ren15306

最新推荐文章于 2022-11-04 20:10:47 发布

阅读量481

点赞数

本文链接：https://blog.csdn.net/RenZjun/article/details/78314927

版权

<!DOCTYPE html>
<html ng-app="UMApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>用户管理 - 添加用户</title>

    <script type="text/javascript">
        var app = angular.module("UMApp", []);

        app.controller("UMCtrl", function ($scope) {
            $scope.data = [];
            var id = 1;

            // 显示添加用户表单
            $scope.showAddUserBox = function () {
                $scope.add_user_box_is_show = true;
            };

            // 提交添加用户表单
            $scope.addUser = function () {
                if ($scope.add_user_name == undefined || $scope.add_user_name == "") {
                    alert("请输入用户名！");
                    return;
                }

                if ($scope.add_user_password == undefined || $scope.add_user_password == "") {
                    alert("请输入密码！");
                    return;
                }

                if ($scope.add_user_repassword == undefined || $scope.add_user_repassword == "") {
                    alert("请再次确认密码！");
                    return;
                }

                if ($scope.add_user_password != $scope.add_user_repassword) {
                    alert("两次密码不一致！");
                    return;
                }

                if ($scope.add_user_age == undefined || $scope.add_user_age == "") {
                    alert("请输入年龄！");
                    return;
                }

                if ($scope.add_user_sex == undefined || $scope.add_user_sex == "") {
                    alert("请输入性别！");
                    return;
                }

                if (!/^\d+$/.test($scope.add_user_age)) {
                    alert("年龄必须整数！");
                    return;
                }

                var age = parseInt($scope.add_user_age);
                if (age < 10 || age > 60) {
                    alert("年龄必须在10~60之间！");
                    return;
                }

                $scope.data.push({
                    id: id++,
                    name: $scope.add_user_name,
                    password: $scope.add_user_password,
                    age: $scope.add_user_age,
                    sex: $scope.add_user_sex
                });

                $scope.add_user_name = "";
                $scope.add_user_password = "";
                $scope.add_user_repassword = "";
                $scope.add_user_age = "";
                $scope.add_user_sex = "";
                $scope.add_user_box_is_show = false;
            };
        });
    </script>
</head>
<body ng-controller="UMCtrl">
<table border="1">
    <tr>
        <th>
            <input type="checkbox" name="check_all"/>
        </th>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="user in data">
        <td>
            <input type="checkbox" name="user_id[]"/>
        </td>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
        <td>
            <button>修改密码</button>
        </td>
    </tr>
</table>

<div>
    <button ng-click="showAddUserBox()">添加用户</button>
</div>

<div ng-show="add_user_box_is_show">
    <table border="1">
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" ng-model="add_user_name"/>
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="text" ng-model="add_user_password"/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
            </td>
            <td>
                <input type="text" ng-model="add_user_repassword"/>
            </td>
        </tr>
        <tr>
            <td>
                年龄：
            </td>
            <td>
                <input type="text" ng-model="add_user_age"/>
            </td>
        </tr>
        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="text" ng-model="add_user_sex"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button ng-click="addUser()">提交</button>
            </td>
        </tr>
    </table>
    </table>
</div>
</body>
</html>