增改查

最新推荐文章于 2020-04-25 19:41:29 发布
里予子
最新推荐文章于 2020-04-25 19:41:29 发布
阅读量221
点赞数
本文链接：https://blog.csdn.net/qq_37457363/article/details/78329577
版权
<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
    <meta charset="UTF-8">
    <title>么么哒</title>
    <script src="angular-1.3.0.js"></script>
    <style>
        *{
            margin: 0 auto;
        }
        button{
            background-color: #099ccc;
            border: 1px #ccc solid;
            border-radius: 10px;
            width: 100px;
            height: 50px;
        }
        table{
            text-align: center;
        }
    </style>
</head>
<body ng-controller="myCtrl">
    <div>
        <div style="width: 500px;">
            <div style="float: left">查询<br><input type="text" ng-model="s_name" ng-change="searchByname()">
            </div>
            <div style="margin-left: 300px">排序<br>
                <select style="width: 200px" ng-model="ordertype" ng-options="x.type for x in sites"
                    ng-change="sort()">
                </select>
            </div>
        </div>
        <br>
        <br>
        <button style="display: block" ng-click="AddShow()">新增球员</button>
        <br>
        <table border="1" cellspacing="0" cellpadding="10" width="500px">
                 <tr style="background-color: darkolivegreen">
                     <th>姓名</th>
                     <th>位置</th>
                     <th>球号</th>
                     <th>票数</th>
                 </tr>
                 <tr ng-repeat="person in persons | orderBy:orderBytype">
                      <td>{{person.name}}</td>
                     <td>{{person.position}}</td>
                     <td>{{person.number}}</td>
                     <td>{{person.charts}}</td>
                 </tr>
        </table>
        <div style="width: 200px" ng-show="showorhide">
            <h2 style="text-align: center">添加球员</h2>
            姓名：<input type="text" ng-model="add_name">
            位置：<input type="text" ng-model="add_position">
            球号：<input type="text" ng-model="add_number">
            票数：<input type="text" ng-model="add_charts">
            <button ng-click="add()">提交</button>
        </div>
    </div>

    <script>
        var app = angular.module("myapp",[]);
        app.controller("myCtrl",function($scope){
            //初始化球员数据
            $scope.persons=[{name:"张三",position:"控球后卫",number:"11",charts:"999"},
                {name:"李四",position:"大前锋",number:"21",charts:"888"},
                {name:"王五",position:"小前锋",number:"23",charts:"777"},
                {name:"赵六",position:"中锋",number:"10",charts:"666"},
                {name:"周七",position:"得分后卫",number:"1",charts:"555"}
            ];

            //查询球员信息代码
            var old_data = $scope.persons;
            $scope.searchByname=function(){
                //获取输入框文字进行过滤
                var text = $scope.s_name;
                var pattern = new RegExp("滚");
                var result = text.match(pattern);
                if(!result){
                    //将要查询的球员姓名与数据进行比对
                    $scope.persons=[];
                    for(var i in old_data){
                        if(old_data[i].name == $scope.s_name){
                            $scope.persons.push(old_data[i]);
                        }
                    }
                }else{
                    alert("含有特殊字符");
                    $scope.s_name="";
                    return;
                }
            }
            $scope.showorhide=false;

            //当点击添加球员时，显示球员信息输入框
            $scope.AddShow=function(){
                $scope.showorhide=true;
            }
           //当点击提交时，判断该邱元师是否存在，若存在则清空输入框的内容，并隐藏
           $scope.add=function(){
               for(var i in $scope.persons){
                   if($scope.persons[i].name == $scope.add_name){
                         alert("该球员已存在！");
                       $scope.showorhide=false;
                       $scope.add_name="";
                       $scope.add_position="";
                       $scope.add_number="";
                       $scope.add_charts="";
                       return;
                   }else{

                       //将球员的信息添加到数据中
                       $scope.persons.push({name:$scope.add_name,position:$scope.add_position,number:$scope.add_number,charts:$scope.add_charts});
                       $scope.add_name="";
                       $scope.add_position="";
                       $scope.add_number="";
                       $scope.add_charts="";
                       $scope.showorhide=false;
                       return;
                   }
               }
           }

            //设定排序方式
            $scope.sites=[
                {type:"票数正序"},
                {type:"票数倒序"}];
          //获取排序方式，进行排序操作

            $scope.sort = function(){
                if($scope.ordertype.type == "票数正序"){
                    $scope.orderBytype = "charts";
                }else{
                    $scope.orderBytype = "-charts";
                }
            }
        })
    </script>
</body>
</html>