AngularJS+查询+敏感字+排序+添加-优快云博客

本文链接：https://blog.youkuaiyun.com/Logitech12/article/details/78348796

本文介绍了一个使用AngularJS实现的球员信息管理系统，该系统包括球员信息的添加、展示、搜索及排序等功能。通过简单的HTML和AngularJS指令实现了球员信息的动态管理和交互。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>球队</title>
    <style>
        *{
            margin: 0 auto;
        }
        .box{
            width: 800px;
            height: 700px;
            padding-top: 20px;
        }
        .left{
            float: left;
            width: 350px;
            height: 100px;
        }
        .right{
            float: right;
            width: 350px;
            height: 100px;
        }
        .bottom{
            width: 750px;
            height: 500px;
            float: left;
        }
        .bottom button{
            width: 180px;
            height: 40px;
            background: deepskyblue;
            font-size: 20px;
        }
        .box2{
            width: 300px;
            height: 100px;
        }
    </style>
    <script src="angular-1.5.5/angular.min.js"></script>
    <script>
        var app = angular.module("myapp",[]);
        app.controller("mycont",function ($scope) {
            //初始化球员数据
            $scope.data = [{
                name:"张三",
                wz:"控球后卫",
                qh:"11",
                ps:999
            },{
                name:"李四",
                wz:"大前锋",
                qh:"21",
                ps:888
            },{
                name:"王五",
                wz:"小前锋",
                qh:"23",
                ps:777
            },{
                name:"赵六",
                wz:"中锋",
                qh:"10",
                ps:666
            },{
                name:"李敏",
                wz:"得分后卫",
                qh:"1",
                ps:555
            }];
            //添加球员
            $scope.show = false;
            $scope.add = function () {
                $scope.show = true;
            }
            $scope.adds = function () {
                //判断信息是否完整
                if ($scope.name != null&&$scope.wz != null&&$scope.qh != null){
                    for (var i=0;i<$scope.data.length;i++){
                        //判断球员是否存在
                        if ($scope.data[i].name == $scope.name){
                            alert("球员已存在！！！");
                            return;
                        }
                    }
                    $scope.data.push({name:$scope.name, wz:$scope.wz, qh:$scope.qh, ps:1});
                } else {
                    alert("请填入球员完整信息！！！");
                    return;
                }
                //初始化、隐藏添加框
                $scope.name="";
                $scope.wz="";
                $scope.qh="";
                $scope.show = false;
            }
            //过滤敏感字
            $scope.search = "";
            $scope.search2 = "";
            $scope.$watch("search",function (value) {
                if (value.indexOf("#")!=-1) {
                    alert("敏感字");
                } else {
                    $scope.search2 = $scope.search;
                }
            })
            /*//排序
            $scope.order = "票数排序";
            $scope.fun=function(){
                if($scope.sort!="--请选择--"){
                    if($scope.sort=="倒序"){
                        $scope.revers=true;
                    }else if($scope.sort=="正序"){
                        $scope.revers=false;
                    }
                }
            };*/
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
    <div class="box">
        <!--查询表-->
        <div class="left">
            <h4>查询</h4>
            <input type="text" ng-model="search" style="width: 300px; height: 30px">
        </div>
        <!--p排序表-->
        <div class="right">
            <h4>排序</h4>
            <select style="width: 300px; height: 36px" ng-model="order"><!--ng-change="fun()"-->
                <option>票数排序</option>
                <option value="-ps">倒序</option>
                <option value="ps">正序</option>
            </select>
        </div>
        <div class="bottom">
            <button ng-click="add()">新增球员</button>
            <br/><br/><br/>
            <!--球员信息表-->
            <table border="soild 1px #000" cellspacing="0" width="100%" style="height: 300px">
                <thead style="background: #999999">
                <tr>
                    <td>姓名</td>
                    <td>位置</td>
                    <td>球号</td>
                    <td>票数</td>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in data|filter:search2|orderBy:order"><!--|filter:{name:search}--><!--orderBy:'ps':revers-->
                    <td>{{item.name}}</td>
                    <td>{{item.wz}}</td>
                    <td>{{item.qh}}</td>
                    <td>{{item.ps}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!--添加球员信息框-->
    <div ng-show="show" class="box2">
        姓名:<input type="text" ng-model="name"><br>
        位置:<input type="text" ng-model="wz"><br>
        球号:<input type="text" ng-model="qh"><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button ng-click="adds()">完成</button>
    </div>
</body>
</html>