AngularJS球员管理系统-优快云博客

本文介绍了一个使用AngularJS实现的球员信息管理系统，该系统包括球员信息的添加、展示、搜索及排序等功能。通过前端技术实现了对球员数据的有效管理。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
            width: 50%;
            height: 40%;
            margin: 0 auto;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp = angular.module("myapp",[]);
      /*  //过滤敏感字
        myapp.filter("filter1",function () {
            return function (msg,flag) {
                return msg.replace(/我/,flag);
            }

        })*/
        myapp.controller("myCtrl",function ($scope) {
           $scope.data = [
               {
                   "name":"张三",
                   "position":"后卫",
                   "num":"11",
                   "vote":"999"
               },
               {
                   "name":"李四",
                   "position":"前锋",
                   "num":"21",
                   "vote":"888"
               },
               {
                   "name":"王五",
                   "position":"前锋",
                   "num":"23",
                   "vote":"777"
               },
               {
                   "name":"赵六",
                   "position":"中锋",
                   "num":"10",
                   "vote":"666"
               },
               {
                   "name":"周期",
                   "position":"后卫",
                   "num":"1",
                   "vote":"555"
               }

           ];
           //添加成员，不能出现重复的球号
            $scope.add = function () {
               for(var i = 0;i<$scope.data.length;i++){
                   if($scope.num==$scope.data[i].num){
                       alert("球号只能出现一次");
                       return;
                   }

               }
               //非空判断
                if($scope.name==""){
                   alert("请输入球员名称")
                   return;

                }

              $scope.data.push({"name":$scope.name,"position":$scope.position,"num":$scope.num,"vote":$scope.vote})


            }
          
             //排序
             $scope.sort = "请选择"
             $scope.revers = true;
             $scope.fun = function () {
               if($scope.sort !="请选择"){
                   if($scope.sort!="票数正序"){
                       $scope.revers = true;
                   }else if($scope.sort=="票数正序"){
                       $scope.revers = false;
                   }
               }

             }

             //敏感字
            $scope.search="";
            $scope.search2 = "";
            $scope.$watch("search",function (value) {
                console.log(value);
                if(value.indexOf("我")!=-1){
                     alert("包含敏感字");
                     $scope.search = "";
                }else{
                    $scope.search2=$scope.search;
                }
            });


        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="search">查询

<select ng-model="sort" ng-change="fun()">
    <option>请选择</option>
    <option>票数正序</option>
    <option>票数倒序</option>

</select><br>
<input type="text" ng-model="name">请输入姓名
<input type="text" ng-model="position">请输入位置
<input type="text" ng-model="num">请输入球号
<input type="text" ng-model="vote">请输入票数
<button ng-click="add()" style="background: blue">新增球员</button><br>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>位置</th>
        <th>球号</th>
        <th>票数</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data|filter:{name:search2}|orderBy:'vote':revers">
        <td>{{item.name}}</td>
        <td>{{item.position}}</td>
        <td>{{item.num}}</td>
        <td>{{item.vote}}</td>
    </tr>
    </tbody>
</table>
</body>
</html>