球员

最新推荐文章于 2019-02-25 15:21:00 发布

zh_qing

最新推荐文章于 2019-02-25 15:21:00 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/zhang823253467/article/details/78331157

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .left{
               float: left;
           }
           .right{
               float: right;
           }
           .even{
               background-color: blue;
           }
           .odd{
               background-color: red;
           }
           .first{
               background-color: yellow;
           }
           .f{
               background-color: pink;
           }
           .d{
               background-color: green;
           }
       </style>
       <script type="text/javascript" src="../jQuery-2.1.0/jquery-2.1.0.js" ></script>
       <script type="text/javascript" src="../AngularJS/angular.js" ></script>
       <script type="text/javascript" src="../AngularJS/angular-route.js" ></script>
       <script>
           $(function(){
               $("thead tr").addClass("first");
               $("tbody tr:even").addClass("even");
               $("tbody tr:odd").addClass("odd");

               $("tbody tr").mousemove(function(){
                   //alert("asdf");
                   $(this).addClass("f");
               });
               $("tbody tr").mouseout(function(){
                   //alert("asdf");
                   $(this).removeClass("f");
               });
               $("#tr td").mousedown(function(){
                   //alert("asdf");
                   $(this).addClass("d");
               });
               $("#tr td").mouseup(function(){
                   //alert("asdf");
                   $(this).removeClass("d");
               });
           });
       </script>
       <script>
           var app = angular.module("myApp",["ngRoute"]);
           //定义路由器
           app.config(["$routeProvider",function($routeProvider){
               //使用$routeProvider服务，配置路由规则
               $routeProvider
                   .when("/addPlayer",{
                       controller:"addPlayerCtrl",
                       templateUrl:"addPlayer.html"
                   })
                   .otherwise({redirectTo:"/addPlayer"});
           }]);
           //自定义过滤器
           app.filter("myFilter",function(){
               return function(text){
                   if(text.indexOf("敏感字符")>=0){
                       //替换字符串
                       return text.replace(/敏感字符/g,"****");
                   }else{
                       return text;
                   }
               }
           });

           app.controller("myCtrl",function($scope,$location){
               //定义数据源
               $scope.players = [{
                   name:"张三",
                   place:"控球后卫",
                   num:11,
                   ticket:999
               },{
                   name:"李四",
                   place:"大前锋",
                   num:21,
                   ticket:888
               },{
                   name:"王五",
                   place:"小前锋",
                   num:23,
                   ticket:777
               },{
                   name:"赵六",
                   place:"中锋",
                   num:10,
                   ticket:666
               },{
                   name:"周七",
                   place:"得分后卫",
                   num:1,
                   ticket:555
               }];

               $scope.order = "-ticket";

               //点击事件触发路由路径：跳转
               $scope.goToUrl = function(){
                   $location.path("/addPlayer");
               }
           });

           //添加用户的控制器
           app.controller("addPlayerCtrl",function($scope){
               $scope.name = "";
               $scope.place = "";
               $scope.num = "";
               $scope.ticket = "";
               //点击添加按钮，执行sub方法
               $scope.sub = function(){
                   var flag1 = flag2 = flag3 = flag4 = false;

                   if($scope.name == null || $scope.name == ""){
                       alert("球员名不能为空");
                       flag1 = false;
                   }else {
                       var flag = true;
                       for(player in $scope.players){
                           if($scope.players[player].name == $scope.name){
                               alert("重复")
                               flag = false;
                               flag1 = false;
                           }

                       }
                       if(flag){
                           flag1 = true;
                       }else{

                       }
                   }
                   if($scope.place == null || $scope.place == ""){
                       alert("位置不能为空");
                       flag2 = false;
                   }else{
                       flag2 = true;
                   }
                   if($scope.num == null || $scope.num == ""){
                       alert("球号不能为空");
                       flag3 = false;
                   }else{
                       flag3 = true;
                   }
                   if($scope.ticket == null || $scope.ticket == ""){
                       alert("票数不能为空");
                       flag4 = false;
                   }else{
                       flag4 = true;
                   }

                   //判断添加用户
                   if(flag1 && flag2 && flag3 && flag4){
                       //如果都为true即输入框都不为空，添加用户
                       var palyer = {
                           name:$scope.name,
                           place:$scope.place,
                           num:$scope.num,
                           ticket:parseInt($scope.ticket)
                       };
                       //将用户添加到数据源
                       $scope.players.push(palyer);
                   }
               }
           });
       </script>

   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <div style="width: 500px;">
               <div class="left">
                   查询<br/>
                   <input type="text" ng-model="search "/>
               </div>
               <div class="right">
                   排序<br/>
                   <select ng-model="order">
                       <option value="-ticket">票数倒叙</option>
                       <option value="ticket">票数正叙</option>
                       <option value="-num">球号倒叙</option>
                       <option value="num">球号正叙</option>
                   </select>
               </div>
           </div>
           <button ng-click="goToUrl()" style="margin-top: 80px;">新增球员</button><br /><br />
           <table border="1 solid blue" cellpadding="20" cellspacing="0">
               <thead>
                   <tr>
                       <th>姓名</th>
                       <th>位置</th>
                       <th>球号</th>
                       <th>票数</th>
                   </tr>
               </thead>
               <tbody>
                   <tr id="tr" ng-repeat="player in players | filter:search | orderBy:order">
                       <td>{{player.name}}</td>
                       <td>{{player.place}}</td>
                       <td>{{player.num}}</td>
                       <td>{{player.ticket}}</td>
                   </tr>
               </tbody>
           </table>
           <br />
           <div ng-view>

           </div>

       </center>

       
       <script type="text/ng-template" id="addPlayer.html">
           <form>
               姓名:<input type="text" ng-model="name"/><br/>
               位置:<input type="text" ng-model="place"/><br />
               球号:<input type="text" ng-model="num"/><br />
               票数:<input type="text" ng-model="ticket"/><br />
               <input type="button" value="添加" ng-click="sub()"/>
           </form>
       </script>

   </body>
</html>