用户信息表（查询数据、修改密码、添加数据）

谁借莪１个温暖的怀抱￠ 2022-06-07 12:28 233阅读 0赞

效果：列表的数据

![Center][]

\--------------------------------------------------------------------------------------------

添加用户的效果：

![Center 1][]

\--------------------------------------------------------------------------------------------

修改用户表：

![Center 2][]

\--------------------------------------------------------------------------------------------

先把依赖导进去：

\--------------------------------------------------------------------------------------------

代码：

<!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>

[Center]: /images/20220607/3b4f5402600d405392eee555f571bfd3.png
[Center 1]: /images/20220607/181f7785f1684e63bb337e157cb64854.png
[Center 2]: /images/20220607/37a8703014a849eba33039679a803f16.png