Angular 入门用户信息管理表

最新推荐文章于 2021-05-28 15:30:15 发布
Gorky_19
最新推荐文章于 2021-05-28 15:30:15 发布
阅读量340
点赞数
本文链接：https://blog.csdn.net/Gorky_19/article/details/78314273
版权
下面代码是一个简单的用户信息管理表！
<!DOCTYPE html>
<html ng-app="UApp">
<head lang="en">
    <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="angular-1.3.0.js"></script>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <title>用户管理</title>
    <script type="text/javascript">
        var example_data = [
            {
                id: 1,
                name: "曹操",
                password: "123456",
                age: 45,
                sex: "男"
            },
            {
                id: 2,
                name: "张辽",
                password: "123456",
                age: 34,
                sex: "男"
            },
            {
                id: 3,
                name: "司马懿",
                password: "123456",
                age: 30,
                sex: "男"
            },
            {
                id: 4,
                name: "夏侯淳",
                password: "123456",
                age: 40,
                sex: "男"
            },{
                id: 5,
                name: "小乔",
                password: "123456",
                age: 28,
                sex: "女"
            },
            {
                id: 6,
                name: "小乔",
                password: "123456",
                age: 26,
                sex: "女"
            }
                ];
    </script>

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

        app.controller("MyCtrl",function($scope) {
            $scope.data = example_data;
            // 查询的年龄区间
            $scope.age_sections = [
                {
                    txt: "10~20",
                    min: 10,
                    max: 20
                },
                {
                    txt: "20~30",
                    min: 20,
                    max: 30
                },
                {
                    txt: "30~40",
                    min: 30,
                    max: 40
                },
                {
                    txt: "40~50",
                    min: 40,
                    max: 50
                }
            ];
            // 清空列表：$scope.data前，备份下全部数据
            var oldData = $scope.data;

            $scope.search = function () {
                var name = "";
                var age = {}; // json对象，如：{txt: "70~80", min: 70, max: 80 }
                var sex = "";

                if ($scope.search_name != undefined && $scope.search_name != null) {
                    name = $scope.search_name.trim();
                }

                // 未选中时值：undefined，选中“请选择”按钮时值：null
                if ($scope.search_age != undefined && $scope.search_age != null && $scope.search_age != "") {
                    age = $scope.search_age; // age = json对象，如：{txt: "70~80", min: 70, max: 80 }
                }

                if ($scope.search_sex != undefined && $scope.search_sex != null) {
                    sex = $scope.search_sex;
                }

                // 没有可查询的项
                if (name == "" && age == "" && sex == "") {
                    return;
                }

                console.log("需要查找的name: " + name + ", 需要查找的age区间: [" + age.min + "~" + age.max + "],  需要查找的sex: " + sex);

                // 清空列表
                $scope.data = [];

                // 从全部数据中查找name、age、sex，找到后添加到列表中
                for (var i in oldData) {
                    // name和age、sex 只要满足其中一个要求就可以添加到列表
                    var item = oldData[i];

                    // name相等，添加列表
                    if (item.name == name) {
                        $scope.data.push(item);
                        continue;
                    }

                    // age在区间，添加列表，age = json对象，如：{txt: "70~80", min: 70, max: 80 }
                    if (item.age >= age.min && item.age <= age.max) {
                        $scope.data.push(item);
                        continue;
                    }

                    // sex相等，添加列表
                    if (item.sex == sex) {
                        $scope.data.push(item);
                        continue;
                    }
                }
            };
            $scope.removeAll = function() {
                $scope.data = [];
            }
            $scope.removeCheck = function() {
                var remove_idx_arr = [];// 待删除的所有索引
                //获取所有users并且被选择的checkbox
                $("input[name='users']:checked").each(function() {
                    var indexs = this.value;
                    remove_idx_arr.push(indexs);
                });
                var data = $scope.data;//备份当前列表
                $scope.data = [];//清空
                for(var idx in data) {
                    // 索引不在待删除的所有索引中，添加到新列表中
                    if(remove_idx_arr.indexOf(idx) == -1) {
                        $scope.data.push(data[idx]);
                    }
                }
            };
            $(function() {
                $("input[name='check_all']").click(function() {
                    var cheed = this.checked;

                    $("input[name='users']").each(function() {
                        this.checked = cheed;
                    });
                });
            });
            $scope.addUser = function () {
                $scope.addUserIsShow = true;
            };
              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.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.editUserIsShow = false;
            };
        });
    </script>
    <style>
        .btn {
            margin-left: 130px;
            margin-top: 25px;
        }
    </style>
</head>
<body ng-controller="MyCtrl">
<div>
    <input type="text" ng-model="search_name" ng-change="search()" placeholder="用户名查询">
      
    年龄：
    <select ng-model="search_age" ng-options="section.txt for section in age_sections"
            ng-change="search()">
        <option value="">请选择</option>
    </select>
      
    性别：
    <select ng-model="search_sex" ng-change="search()">
        <option value="">请选择</option>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <button ng-click="removeAll()">全部删除</button>
    <button ng-click="removeCheck()">批量删除</button>
</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>
        </th>
    </tr>
    <tr ng-repeat="user in data">
        <td>
            <input type="checkbox" name="users" value="{{$index}}"/>
        </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 class="btn" 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>
</body>
</html>