根据下拉框排序，自定义过滤器，添加，查询等操作

最新推荐文章于 2021-05-31 04:31:30 发布

Gybk123

最新推荐文章于 2021-05-31 04:31:30 发布

阅读量418

点赞数

本文链接：https://blog.csdn.net/Gybk123/article/details/78562696

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>周考三练习</title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
       *{
           margin: 0 auto;
           padding: 0;

       }

       body{
           width: 850px;
           height: 800px;
       }

           #l{
               float: left;


           }
           #l input{
               width: 200px;
               height: 20px;

           }
           #r{
               float: right;
           }
           #r select{
               width: 200px;
               height: 24px;


           }
           #xinzeng{
               padding-top: 50px;
           }
           table{
               margin-top: 20px;
               width: 850px;

           }
           #shuru{
               margin-top: 20px;
           }
           tr:nth-child(odd) {background-color: #FFFFFF;}
            tr:nth-child(even) {background-color: #EEEEEE;}
            tr:nth-child(1) {background-color: #999999;}
       </style>
   </head>
   <body>
   <div id="zong" ng-app="myApp" ng-controller="myCtrl">


       <div id="l">
           查询<br />
       <input type="text" id="chaxun" ng-keydown="cha($event)" />
       </div>

       <div id="r">
           排序<br />

       <select ng-model="xuanxiang" ng-options="x for x in names" ng-init="xuanxiang = names[0]" ng-change="change()">
           </select>
       </div>

       <div id="xinzeng">
           <input type="button" value="新增球员" ng-click="add()"/>
       </div>

       <div id="shuru">
           姓名:<input type="text" id="name" />位置:<input type="text" id="weizhi" />球号:<input type="text" id="qiuhao" />票数:<input type="text" id="piaoshu" />
       </div>

       <table border="1px" cellspacing="0" cellpadding="0">

           <tr><td>姓名</td><td>位置</td><td>球号</td><td>票数</td></tr>
           <tr ng-repeat="ren in parents">
               <td>{{ren.name|myFilter}}</td>
               <td>{{ren.weizhi}}</td>
               <td>{{ren.qiuhao}}</td>
               <td>{{ren.piaoshu}}</td>
           </tr>

       </table>

       <script type="text/javascript">
           var mo = angular.module("myApp",[]);
           mo.controller("myCtrl",function($scope){
               //下拉显示的数据
               $scope.names =["升序","降序"];

               $scope.parents = [{
                   "name":"张硕",
                   "weizhi":"前锋",
                   "qiuhao":1,
                   "piaoshu":80},
                   {"name":"骚坤",
                   "weizhi":"中锋",
                   "qiuhao":2,
                   "piaoshu":88},
                   {"name":"小凯",
                   "weizhi":"后卫",
                   "qiuhao":3,
                   "piaoshu":90}];
                   //添加球员
                   $scope.add = function(){

                       //先获取输入框的内容
                       var name = $("#name").val();
                       var weizhi = $("#weizhi").val();
                       var qiuhao = $("#qiuhao").val();
                       var piaoshu = $("#piaoshu").val();
                       //判断名字不为空
                       if(name == ""){
                           alert("名字不能为空");
                           return;
                       }
                       //球员姓名不能重复
                       for(var i = 0;i<$scope.parents.length;i++){
                           var n = $scope.parents[i];
                           var name1 = n.name;
                           if(name == name1){
                               alert("姓名有重复的，请重新输入");
                           }
                       }
                       //先new一个对象
                       var newRen = {"name":name,
                       "weizhi":weizhi,
                       "qiuhao":qiuhao,
                       "piaoshu":piaoshu

                       };
                       //添加
                       $scope.parents.push(newRen);
                   }
                   //排序
                   $scope.change = function(){
                       var xz = $scope.xuanxiang;
                       if(xz == "升序"){
                           $scope.parents.sort(function(a,b){
                               if(a.piaoshu<b.piaoshu){
                                   return -1;
                               }else if(a.piaoshu>b.piaoshu){
                                   return 1;
                               }
                               return 0;
                           });
                       }else{
                           $scope.parents.sort(function(a,b){
                               if(a.piaoshu<b.piaoshu){
                                   return 1;
                               }else if(a.piaoshu>b.piaoshu){
                                   return -1;
                               }
                               return 0;
                           });
                       }
                   }
                   //查询
                   $scope.cha = function($event){
                       var key = $event.keyCode;
                   if(key==13){
                       //取得输入的值
                       var nam = $("#chaxun").val();
                       //创建一个新的数组
                       var newParents = [];
                       for (var i=0;i<$scope.parents.length;i++) {
                           if(nam==$scope.parents[i].name){
                               newParents.push($scope.parents[i]);
                           }
                       }
                       //之后，将数据替换掉
                       $scope.parents = newParents;
                   }
                   }
           });
           //自定义过滤器
           mo.filter("myFilter",function(){
               return function(input){
                   //input 就是要过滤的数据
                   var newInput = input.replace(/马/g,"*");
                   return newInput;

               }
           });
       </script>
   </div>
   </body>
</html>