Angular 信息管理表-优快云博客

本文链接：https://blog.youkuaiyun.com/Gorky_19/article/details/78333096
这个示例展示了如何使用Angular实现一个简单的信息管理表，包括球员信息的展示、搜索和排序功能。用户可以输入球员的姓名、位置、球号和票数，系统会检查是否已存在相同姓名的球员，并提供正序和倒序排列票数的功能。
<!DOCTYPE html>
<html ng-app="zhou">
<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="ionic/js/angular/angular.js"></script>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <title>周考3</title>
    <style>
        .btn {
            background-color: #11c1f3;
            width: 100px;
            height: 35px;
            border-radius: 5px;
            border: none;
        }
        table, th , td  {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
        table tr:nth-child(odd)    {
            background-color: #ffffff;
        }
        table tr:nth-child(even) {
            background-color: #f1f1f1;
        }
    </style>
    <script type="text/javascript">
        var datas = [
            {
                id:1,
                name:"张三",
                work:"控球后卫",
                number:11,
                arrs:777
            },
            {
                id:2,
                name:"李四",
                work:"大前锋",
                number:21,
                arrs:999
            },
            {
                id:3,
                name:"王五",
                work:"小前锋",
                number:23,
                arrs:888
            },
            {
                id:4,
                name:"赵六",
                work:"中锋",
                number:10,
                arrs:666
            },
            {
                id:5,
                name:"周七",
                work:"得分后卫",
                number:1,
                arrs:555
            }
        ];
    </script>
    <script type="text/javascript">
        var app = angular.module("zhou",[]);
        app.controller("zhouCtrl",function($scope) {
            $scope.search_paixu="";
            $scope.data = datas;
            $scope.search = function() {
                var  name = "";
                if($scope.search_name !=undefined && $scope.search_name !=null) {
                    name = $scope.search_name.trim();
                }
                var array = ["操"];
                for(var i=0;i<array.length;i++) {
                    var r = new RegExp(array[i],"ig");
                    name = name.replace(r,"*");
                    if(name.indexOf('*')!='-1') {
                        alert("搜索内容有敏感字体");
                        return;
                    }
                }
            };
            $scope.addUser = function() {
                $scope.addUserIsShow = true;
            };
            $scope.add = function() {
                var namen = $scope.names;
                if(namen == "张三" || namen == "李四" ||namen == "王五" ||namen == "赵六" ||namen == "周七") {
                    alert("球员姓名已存在！");
                    return;
                }else{
                    $scope.data.push({
                        name: $scope.names,
                        work: $scope.works,
                        number: $scope.numbers,
                        arrs: $scope.arrss
                    });
                    $scope.names = "";
                    $scope.works = "";
                    $scope.numbers = "";
                    $scope.arrss = "";
                    $scope.addUserIsShow = false;
                }
            };
            $scope.order = function() {
                var datas = $scope.data;
                if($scope.select_piao==1) {
                    datas.sort(function(a,b) {
                        return (a.arrs> b.arrs) ? 1:-1;
                    });
                }else if($scope.select_piao== 2) {
                    datas.sort(function(a,b) {
                        return (a.arrs < b.arrs) ? 1:-1;
                    });
                }
            }
        });
    </script>
</head>
<body ng-controller="zhouCtrl">
   <div class="one">
       <span>查询</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <span>排序</span><br/>
       <input type="text" ng-model="search_name" size="25" style="height: 23px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <select ng-model="select_piao" ng-change="order()" style="width: 200px;height: 28px">
           <option value="">排序</option>
           <option value="1">票数正序</option>
           <option value="2">票数倒序</option>
       </select><br/><br/>
       <button class="btn" ng-click="addUser()">新增球员</button>
   </div><br/><br/>
   <table style="width: 30%">
       <tr style="background-color: #999999;">
           <th>姓名</th>
           <th>位置</th>
           <th>球号</th>
           <!--<th ng-click="value='arrs';desc=!desc">票数</th>-->
           <th>票数</th>
       </tr>
       <tr ng-repeat="item in data | filter:search_name:'name'| orderBy:select_piao">
           <td>{{ item.name }}</td>
           <td>{{ item.work }}</td>
           <td>{{ item.number }}</td>
           <td>{{ item.arrs }}</td>
       </tr>
      </table>
   <div ng-show="addUserIsShow">
       <table border="1">
           <tr>
               <td>
                   姓名：
               </td>
               <td>
                   <input type="text" ng-model="names"/>
               </td>
           </tr>
           <tr>
               <td>
                   位置：
               </td>
               <td>
                   <input type="text" ng-model="works"/>
               </td>
           </tr>
           <tr>
               <td>
                   球号：
               </td>
               <td>
                   <input type="text" ng-model="numbers"/>
               </td>
           </tr>
           <tr>
               <td>
                   票数：
               </td>
               <td>
                   <input type="text" ng-model="arrss"/>
               </td>
           </tr>
           <tr>
               <td colspan="2" align="center">
                   <button ng-click="add()">提交</button>
               </td>
           </tr>
       </table>
   </div>
</body>
</html>