AngularJS_table添加/批量删除数据/过滤敏感字符

最新推荐文章于 2022-10-30 23:41:02 发布
原创最新推荐文章于 2022-10-30 23:41:02 发布 · 380 阅读
0 ·
CC 4.0 BY-SA版权
本文介绍了一个使用AngularJS实现的用户管理系统，包括用户信息的增删查改等功能，并实现了基于姓名的查询、年龄排序及表格数据显示。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <style>
            * {
                font-size: 14px;
            }

            #divm {
                width: 600px;
                height: 500px;
                margin: 0 auto;
            }

            #sp1 {
                display: block;
                padding-top: 18px;
                float: left;
                padding-right: 60px;
            }

            #sel1 {
                margin-left: 134px;
            }

            #div1 {
                width: 570px;
                padding-left: 50px;
            }

            #tb1 {
                margin-top: 10px;
                padding: 0px;
                width: 600px;
                border: 1px solid #747474;
            }

            tr:nth-child(even) {
                background-color: #EEEEEE;
            }

            tr:hover {
                background-color: #41C7DB;
            }

            td {
                border-left: 1px solid #747474;
                padding: 3px;
            }

            th {
                background-color: #999999;
            }

            a {
                display: block;
                float: left;
                text-decoration: none;
                padding: 14px 45px;
                border: 1px solid black;
                border-radius: 8px;
                color: #000000;
                margin-top: 30px;
                margin-left: 100px;
            }

            a:hover {
                background-color: black;
                color: white;
            }

            #fieldset {
                float: left;
            }
        </style>
    </head>

    <body ng-app="Mapp" ng-controller="Mctrl">
        <div id="divm">
            <span id="sp1">用户列表</span>
            <div id="div1">
                姓名查询条件
                <input type="text" ng-model="mod_name" id="selectcon" ng-change="mFilter()" />
                <select id="sel1" ng-change="change()" ng-model="age" ng-init="age=ageorder[0]">
                    <option ng-repeat="x in ageorder">{{x}}</option>
                </select>
            </div>
            <table id="tb1" cellpadding="0" cellspacing="0">
                <tr style="background-color:#999999;">
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>拼音</td>
                    <td>职位</td>
                    <td>操作</td>
                </tr>
                <tr ng-repeat="item in items">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.pinyin}}</td>
                    <td>{{item.position}}</td>
                    <td><span ng-click="adel($index)" style="cursor: pointer;">删除</span></td>
                </tr>
            </table>
            <a href="#" ng-click="select1()">&nbsp;&nbsp;查询&nbsp;&nbsp;&nbsp;</a>
            <a href="#" ng-click="adduser()">添加用户</a>
            <fieldset id="fieldset" ng-show="tj">
                <legend>添加用户信息</legend>
                姓名<input type="text" id="add_name" ng-model="add_name" value="" /><br /> 年龄
                <input type="text" id="add_age" ng-model="add_age" value="" /><br /> 拼音
                <input type="text" id="add_pinyin" ng-model="add_pinyin" value="" /><br /> 职位
                <input type="text" id="add_position" ng-model="add_position" value="" /><br />
                <a ng-click="savedata()" style="padding: 10px 50px;margin: 15px 40px;" href="#" />保存</a>
            </fieldset>
        </div>

        <script>
            var m = angular.module("Mapp", []);
            m.controller("Mctrl", function($scope) {
                //数据
                $scope.ageorder = ["年龄正序排序", "年龄倒序排序"]
                $scope.items = [{
                    "name": "张三",
                    "age": "45",
                    "pinyin": "zhangsan",
                    "position": "总经理"
                }, {
                    "name": "李四",
                    "age": "43",
                    "pinyin": "lisi",
                    "position": "设计师"
                }, {
                    "name": "周七",
                    "age": "32",
                    "pinyin": "zhouqi",
                    "position": "人事经理"
                }, {
                    "name": "赵六",
                    "age": "33",
                    "pinyin": "zhaoliu",
                    "position": "工程师"
                }, {
                    "name": "王五",
                    "age": "40",
                    "pinyin": "wangwu",
                    "position": "工程师"
                }];
                //默认正序排列
                $scope.items.sort(function(a, b) {
                    return a.age - b.age;
                })
                //查询方法
                $scope.select1 = function() {
                    $scope.items = [{
                        "name": "张三",
                        "age": "45",
                        "pinyin": "zhangsan",
                        "position": "总经理"
                    }, {
                        "name": "李四",
                        "age": "43",
                        "pinyin": "lisi",
                        "position": "设计师"
                    }, {
                        "name": "周七",
                        "age": "32",
                        "pinyin": "zhouqi",
                        "position": "人事经理"
                    }, {
                        "name": "赵六",
                        "age": "33",
                        "pinyin": "zhaoliu",
                        "position": "工程师"
                    }, {
                        "name": "王五",
                        "age": "40",
                        "pinyin": "wangwu",
                        "position": "工程师"
                    }];
                    var newArr = [];
                    var mod_name = $scope.mod_name;
                    if(mod_name == "") {
                        alert("请输入姓名")
                        return;
                    }
                    //搜索数据
                    for(var i = 0; i < $scope.items.length; i++) {
                        var n = $scope.items[i].name;
                        if(mod_name == n) {
                            newArr.push($scope.items[i]);
                        }
                    }
                    //判断是否搜索到数据
                    if(newArr.length == 0) {
                        $scope.items = [];
                        alert("未找到内容");
                        return;
                    }
                    $scope.items = newArr;
                }
                //删除
                $scope.adel = function($index) {
                    if(confirm("你确定要删除吗?")) {
                        $scope.items.splice($index, 1)
                    }
                }
                //添加用户
                $scope.adduser = function() {
                    $scope.tj = true;
                }
                //保存数据
                $scope.savedata = function() {
                    var add_name = $scope.add_name;
                    var add_age = $scope.add_age;
                    var add_pinyin = $scope.add_pinyin;
                    var add_position = $scope.add_position;
                    var num = /^[1-9]\d?$|^1[01]\d$|^120$/;
                    var aaa = $("#add_age").val();
                    if(num.test(aaa)) {
                        $scope.items.push({
                            "name": add_name,
                            "age": add_age,
                            "pinyin": add_pinyin,
                            "position": add_position
                        })
                        $("#add_name").val("");
                        $("#add_age").val("");
                        $("#add_pinyin").val("");
                        $("#add_position").val("");
                        $scope.tj = false;
                    } else {
                        alert("年龄必须为数字1-120之间1")
                    }
                }
                //排序方法
                $scope.change = function() {
                    var age = $scope.age;
                    if(age == "年龄倒序排序") {
                        $scope.items.sort(function(a, b) {
                            console.log(b.age - a.age)
                            return b.age - a.age;
                        })
                    } else {
                        $scope.items.sort(function(a, b) {
                            console.log(a.age - b.age)
                            return a.age - b.age;
                        })
                    }
                }
                //过滤方法
                $scope.mFilter = function() {
                    if(/敏感字符/g.test($scope.mod_name)) {
                        $scope.mod_name = "****";
                    }
                }
            })
        </script>
    </body>

</html>