添加查询排序过滤

来源：互联网发布：如何成为淘宝摄影师编辑：程序博客网时间：2024/06/05 13:37

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title>第三周练习</title>
       
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

       <style type="text/css">
           .content {
               margin-top: 20px;
               display: flex;
               flex-direction: row;
           }

           .left {
               flex: 1;
           }

           .right {
               flex: 1;
           }

           .left input {
               width: 500px;
               height: 30px;
           }

           .right select {
               width: 500px;
               height: 35px;
           }

           table {
               margin-top: 20px;
               width: 1220px;
           }

           #add {
               margin-top: 20px;
               background: #33CCFF;
               border-radius: 5px;
               width: 80px;
               height: 30px;
           }
       </style>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       
       姓名:<input type="text" id="name" />位置:<input type="text" id="weizhi" />球号：<input type="text" id="qiuhao" />票数:<input type="text" id="piaoshu" />
       <br>
       <div class="content">
           <div class="left">
               <span>
           查询
       </span><br>
       
               <input type="text" ng-keydown="cha($event)" id="chaName"/>
           </div>
           <div class="right">
               <span>
           排序
       </span><br>
       <select ng-model="xuanxiang" ng-options="x for x in names" ng-init="xuanxiang = names[0]" ng-change="change()">
       </select>
           </div>
       </div>

       
       <input class="button-dark" type="button" id="add" value="添加球员" ng-click="add()" />
       
       <table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped">
           <tr style="background: #999999;">
               <td>姓名</td>
               <td>位置</td>
               <td>球号</td>
               <td>票数</td>
           </tr>
           <tr ng-repeat="p in persons">
               <td>{{p.name|myFilter}}</td>
               <td>{{p.weizhi}}</td>
               <td>{{p.qiuhao}}</td>
               <td>{{p.piaoshu}}</td>
           </tr>
       </table>
       
       <script type="text/javascript">
           var mo = angular.module("myApp", []);
           //定义过滤器，过滤敏感词   比如：马--*
               mo.filter("myFilter",function(){

                   return function(input){//input 就是要过滤的数据


                       var newInput = input.replace(/马/g,"*");//参数1：正则，要替换的内容   参数2：新的内容

                       return newInput;
                   }

               });//参数1：过滤器的名字，参数2.方法
           //创建控制器
           mo.controller("myCtrl", function($scope) {
               //下拉显示的数据
               $scope.names =["升序","降序"];
               //初始化数据
               $scope.persons = [{
                   "name": "梅西",
                   "weizhi": "前锋",
                   "qiuhao": 10,
                   "piaoshu": 100
               }, {
                   "name": "内马尔",
                   "weizhi": "前锋",
                   "qiuhao": 11,
                   "piaoshu": 80
               }, {
                   "name": "贝克汉姆",
                   "weizhi": "前锋",
                   "qiuhao": 10,
                   "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.persons.length; i++) {
                           var p0 = $scope.persons[i];
                           var pname = p0.name;
                           if (pname == name) {
                               alert("名字重复");
                               return;
                           }
                       }
                       //添加
                       var newPerson = {
                           "name": name,
                           "weizhi": weizhi,
                           "qiuhao": qiuhao,
                           "piaoshu": piaoshu
                       };
                       $scope.persons.push(newPerson);
                   }
                   //排序
               $scope.change = function() {
                   var xz = $scope.xuanxiang;
                   //判断
                   if(xz=="升序"){
                       $scope.persons.sort(function(a,b){
                           if(a.piaoshu<b.piaoshu){
                               return -1;
                           }else if(a.piaoshu>b.piaoshu){
                               return 1;
                           }
                           return 0;
                       });
                   }else{
                       $scope.persons.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 name1 = $("#chaName").val();
                       //创建一个新的数组
                       var newPersons = [];
                       for (var i=0;i<$scope.persons.length;i++) {
                           if(name1==$scope.persons[i].name){
                               newPersons.push($scope.persons[i]);
                           }
                       }
                       //之后，将数据替换掉
                       $scope.persons = newPersons;
                   }

               }

           });
       </script>
   </body>

</html>

阅读全文

0 0