前端_球员添加正排倒排过滤关键字

最新推荐文章于 2024-08-08 12:24:31 发布

哥哥儿

最新推荐文章于 2024-08-08 12:24:31 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_39707849/article/details/78317798

本文介绍了一个使用AngularJS实现的球员信息管理系统，该系统包括球员信息的查询、排序及新增等功能。通过对输入进行监控来防止敏感词的出现，并利用AngularJS内置的过滤器和指令实现了数据的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            padding: 10px;
            border: 1px solid #000;
        }
    </style>

    <script src="../package/angular-1.5.5/angular.min.js"></script>

    <script>
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope) {
            $scope.data = [{
                name: "张三",
                wz: "控球后卫",
                num: "11",
                ps: "999"
            }, {
                name: "李四",
                wz: "大前锋",
                num: "21",
                ps: "888"
            }, {
                name: "王五",
                wz: "小前锋",
                num: "23",
                ps: "777"
            }, {
                name: "赵六",
                wz: "中锋",
                num: "10",
                ps: "666"
            }, {
                name: "周七",
                wz: "得分后卫",
                num: "1",
                ps: "555"
            }];
            $scope.search = "";
            $scope.search2 = "";
            $scope.$watch("search", function (value) {
                console.log(value);
                if (value.indexOf("枪") != -1) {
                    alert("包含敏感字");
                    $scope.search = "";
                } else {
                    $scope.search2 = $scope.search;
                }
            });
            //选择排序部分
            $scope.sort = "--请选择--";
            //$scope.revers=null;
            $scope.fun = function () {
                if ($scope.sort != "--请选择--") {
                    if ($scope.sort == "票数倒序") {
                        $scope.revers = true;
                    } else if ($scope.sort == "票数正序") {
                        $scope.revers = false;
                    }
                }
            };
            //新增球员部分
            $scope.show = false;
            $scope.add = function () {
                $scope.show = true;
            };
            $scope.push = function () {
                for (var i = 0; i < $scope.data.length; i++) {
                    if ($scope.name == $scope.data[i].name) {
                        alert("重复");
                        return;
                    }
                }
                $scope.data.push({name: $scope.name, wz: $scope.wz, num: $scope.num, ps: $scope.ps});
            };
            console.log(angular.isNumber(0));
        })
    </script>

</head>
<body ng-app="myapp" ng-controller="myCtrl">
<span>查询</span>
<input type="text" ng-model="search">
<span>排序</span>
<select ng-model="sort" ng-change="fun()">
    <option>--请选择--</option>
    <option>票数倒序</option>
    <option>票数正序</option>
</select><br/>
<button ng-click="add()">新增球员</button>
<table>
    <thead>
    <tr>
        <td>姓名</td>
        <td>位置</td>
        <td>球号</td>
        <td>票数</td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data|filter:search2|orderBy:'ps':revers">
        <td>{{item.name}}</td>
        <td>{{item.wz}}</td>
        <td>{{item.num}}</td>
        <td>{{item.ps}}</td>
    </tr>
    </tbody>
</table>
<table ng-show="show">
    <tr>
        <td>姓名</td>
        <td><input type="text" ng-model="name"></td>
    </tr>
    <tr>
        <td>位置</td>
        <td><input type="text" ng-model="wz"></td>
    </tr>
    <tr>
        <td>球号</td>
        <td><input type="text" ng-model="num"></td>
    </tr>
    <tr>
        <td>票数</td>
        <td><input type="text" ng-model="ps"></td>
    </tr>
    <tr>
        <td colspan="2">
            <button ng-click="push()">添加</button>
        </td>
    </tr>
</table>
</body>
</html>