用户2

于 2017-10-26 10:21:11 发布
阅读量310 收藏
点赞数 
<!DOCTYPE html>
<html ng-app="UsersApp">
<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("UsersApp", []);

        app.controller("UsersCtrl", function ($scope) {
            $scope.data = [
                {
                    id: 1,
                    name: "aa",
                    password: "aa",
                    age: 10,
                    sex: "男"
                },
                {
                    id: 2,
                    name: "bb",
                    password: "bb",
                    age: 20,
                    sex: "男"
                },
                {
                    id: 3,
                    name: "cc",
                    password: "cc",
                    age: 30,
                    sex: "男"
                },
                {
                    id: 4,
                    name: "dd",
                    password: "dd",
                    age: 40,
                    sex: "男"
                }
            ];
            var id = 1;

            $scope.add = function () {
                $scope.data.push({
                    id: id++,
                    name: $scope.name,
                    password: $scope.password,
                    age: $scope.age,
                    sex: $scope.sex
                });

                $scope.name = "";
                $scope.password = "";
                $scope.age = "";
                $scope.sex = "";

                $scope.addUserIsShow = false;
            };

            $scope.addUser = function () {
                $scope.addUserIsShow = true;
            };

            $scope.editUser = function (index) {
                var user = $scope.data[index];
                $scope.e_name = user.name;
                $scope.e_old_password = "";
                $scope.e_password = "";
                $scope.e_repassword = "";
                $scope.editUserIsShow = true;
                $scope.index = index;
            };

            $scope.edit = function () {
                if ($scope.e_password != $scope.e_repassword) {
                    alert("两次密码不一致！");
                    return;
                }

                $scope.data[$scope.index].password = $scope.e_password;
                $scope.addUserIsShow = 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]);
                    }
                }
            };
        });

        $(function () {
            $("input[name='check_all']").click(function () {
                var chked = this.checked;

                $("input[name='users']").each(function () {
                    this.checked = chked;
                });
            });
        });
    </script>
</head>
<body ng-controller="UsersCtrl">
<div>
    <input type="text" ng-model="s_name" placeholder="用户名查询" ng-change="searchByName()"/>
</div>

<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="users"/>
        </td>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.sex }}</td>
        <td>
            <button ng-click="editUser($index)">修改密码</button>
        </td>
    </tr>
</table>

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

<div ng-show="addUserIsShow">
    <table border="1">
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" ng-model="name"/>
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="text" ng-model="password"/>
            </td>
        </tr>
        <tr>
            <td>
                年龄：
            </td>
            <td>
                <input type="text" ng-model="age"/>
            </td>
        </tr>
        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="text" ng-model="sex"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button ng-click="add()">提交</button>
            </td>
        </tr>
    </table>
</div>

<div ng-show="editUserIsShow">
    <table border="1">
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" ng-model="e_name" disabled/>
            </td>
        </tr>
        <tr>
            <td>
                旧密码：
            </td>
            <td>
                <input type="text" ng-model="e_old_password"/>
            </td>
        </tr>
        <tr>
            <td>
                新密码：
            </td>
            <td>
                <input type="text" ng-model="e_password"/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
            </td>
            <td>
                <input type="text" ng-model="e_repassword"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="hidden" ng-model="index"/>
                <button ng-click="edit()">提交</button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
流浪记a
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值