AngularJS敏感词过滤,下拉菜单排序,表格隔行换色,添加数据

最新推荐文章于 2022-07-10 11:59:11 发布

meng_c_

最新推荐文章于 2022-07-10 11:59:11 发布

阅读量766

点赞数 1

本文链接：https://blog.csdn.net/thw_m/article/details/78322960

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="AngularJS库/jquery-2.1.0.min.js" ></script>
       <script type="text/javascript" src="AngularJS库/angular.js" ></script>
       <script type="text/javascript" src="AngularJS库/angular-route.js" ></script>
           <style>
           #btn{
               border: 1px solid black;
               width: 120px;
               height: 35px;
               background: #33CCFF;
               text-align: center;
               line-height: 30px;
               border-radius: 5px;
           }
           #tou{
               background:#999999 ;
           }
           /*#tbody1 tr:nth-child(even)偶数行*/
           /*#tbody1 tr:nth-child(odd)偶数行*/

           #tbody1 tr:nth-child(even){
               background: #FFFFFF;
           }
           #tbody1 tr:nth-child(odd){
               background: #EEEEEE;
           }
           #tbody1 tr:hover{
               background: pink;
           }
           /*.biaotou{
               background:#999999;
           }
           .even{
               background: #EEEEEE;
           }
           .odd{
               background: #FFFFFF;
           }
           .yishang{
               background: pink;
           }*/
       </style>
       <script>
           //jquery实现隔行换色表格每行颜色不同
           $(function(){
               //alert("");
/*               $("#tou").addClass("biaotou");
               $("#tbody1 tr:even").addClass("even");
               $("#tbody1 tr:odd").addClass("odd");
               //鼠标移上表格行变色
               $("#tbody1 tr").mousemove(function(){
                   //alert("");
                   $(this).addClass("yishang");
               });
               //鼠标移出表格行变色
               $("#tbody1 tr").mouseout(function(){
                   //alert("");
                   $(this).removeClass("yishang");
               });*/
           });

       </script>
       <script>
           var app = angular.module("myApp",['ngRoute']);
           app.config(["$routeProvider",function($routeProvider){
               $routeProvider
               .when("/",{
                   template:""
                   })
               .when("/addFooter",{
                   templateUrl:"addFooter.html",
                   controller:"addFooterCtrl"
               })
               .otherwise({redirectTo:"/"});
           }]);
           app.controller("myCtrl",function($scope,$location){
               //定义数组
               $scope.arr = [{
                   name:"张三",
                   weizhi:"控球后卫",
                   qiuhao:11,
                   tickets:999
               },{
                   name:"李四",
                   weizhi:"大前锋",
                   qiuhao:21,
                   tickets:888
               },{
                   name:"王五",
                   weizhi:"小前锋",
                   qiuhao:23,
                   tickets:777
               },{
                   name:"赵六",
                   weizhi:"中锋",
                   qiuhao:10,
                   tickets:666
               },{
                   name:"周七",
                   weizhi:"得分后卫",
                   qiuhao:1,
                   tickets:555
               }];

               //点击新增球员按钮的点击事件
               $scope.goToUrl = function(url){
                   $location.path(url);
               }

               //进入页面初始默认的按票数正序排序
               //$scope.zhengfu = "tickets";
               //第二种方法
               $scope.zxdx = "";
               $scope.paixu = "票数正序";
//               ng-change改变时候触发的事件
               $scope.pai = function(){
                   if($scope.paixu=="票数正序"){
                       $scope.zxdx = false;
                   }else{
                       $scope.zxdx = true;
                   }
               };


               $scope.chaxun = "";//首先chaxun进行过滤
               $scope.chaxun2 = "";//没有敏感词之后通过chaxun2查询

               //过滤敏感词,$watch监听
               $scope.$watch("chaxun",function(shuruzhi){
                   if(shuruzhi.indexOf("敏感词")>=0){
                       $scope.chaxun = "***";
                       //$scope.chaxun2 = "";
                       alert("包含敏感词");
                   }else{
                       $scope.chaxun2 = $scope.chaxun;
                   }

               });
       });

           /*   //自定义过滤器
               app.filter("myFilter",function(){
                   return function(text){
                       if(text.indexOf("王五")>=0){
                           return text.replace(/王五/g,"**");
                       }else{
                           return text;
                       }
                   }

               });*/

               //自定义的控制器,路由
               app.controller("addFooterCtrl",function($scope){
               //   alert("");
               //定义添加的变量
               $scope.addName = "";
               $scope.addWeizhi = "";
               $scope.addQiuhao = "";
               $scope.addTickets = "";

               //点击事件
               $scope.addFooter = function(){
                   var flag = true;
                   //判断输入框的值是否满足条件
                   if($scope.addName==""||$scope.addName==null){
                       alert("姓名不能为空");
                       flag = false;
                   }else{
                       for(var i=0;i<$scope.arr.length;i++){
                           if($scope.arr[i].name==$scope.addName){
                               alert("该姓名已存在,不可重复添加");
                               flag = false;
                           }
                       }
                   }
                   if($scope.addWeizhi==""||$scope.addWeizhi==null){
                       alert("位置不能为空");
                       flag = false;
                   }
                   if($scope.addQiuhao==""||$scope.addQiuhao==null){
                       alert("球号不能为空");
                       flag = false;
                   }
                   if($scope.addTickets==""||$scope.addTickets==null){
                       alert("票数不能为空");
                       flag = false;
                   }

                   //判断flag
                   if(flag){
                       //创建对象添加到数组里
                       $scope.duixiang = {
                           name:$scope.addName,
                           weizhi:$scope.addWeizhi,
                           qiuhao:$scope.addQiuhao,
                           tickets:$scope.addTickets
                       };
                       $scope.arr.push($scope.duixiang);

                       alert("添加成功");

                   }
               };

               });

       </script>

   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <table width="50%">
               <tr align="left">
                   <td>查询</td>
                   <td>排序</td>
               </tr>

               <tr align="left">
       <td><input type="text" size="45px" ng-model="chaxun" ng-click="cha()"/></td>
                   <td>
                       
                       
                       <select ng-model="paixu" ng-change="pai()">
                           <option>票数正序</option>
                           <option>票数倒序</option>

                       </select>
                   </td>
               </tr>
               <tr>
                   <td></td>
                   <td></td>
               </tr>
           <tr align="left" >
               <td rowspan="2">
   <button ng-click="goToUrl('/addFooter')" id="btn">新增球员</button>
           </td>
           </tr>
           </table>

           <br />
   <table id="tab" width="50%" border="1" cellpadding="5" cellspacing="0">
               <thead id="tou">
                   <tr>
                       <th>姓名</th>
                       <th>位置</th>
                       <th>球号</th>
                       <th>票数</th>
                   </tr>
               </thead>
               <tbody id="tbody1">
                   
       <tr ng-repeat="x in arr | filter:chaxun2 | orderBy:'tickets':zxdx ">
                       <td>{{x.name}}</td>
                       <td>{{x.weizhi}}</td>
                       <td>{{x.qiuhao}}</td>
                       <td>{{x.tickets}}</td>
                   </tr>
               </tbody>
           </table>
           <br /><br />
           <div ng-view=""></div>
       </center>

       <script type="text/ng-template" id="addFooter.html">
           <table border="1" cellspacing="0" cellpadding="10" width="28%">
               <caption><h4>新增球员表</h4></caption>
               <tr align="center">
                   <td>姓名</td>
                   <td>
               <input type="text" ng-model="addName"/>
                   </td>
               </tr>
               <tr align="center">
                   <td>位置</td>
                   <td>
               <input type="text" ng-model="addWeizhi" />
                   </td>
               </tr>
               <tr align="center">
                   <td>球号</td>
                   <td>
               <input type="text" ng-model="addQiuhao"/>
                   </td>
               </tr>
               <tr align="center">
                   <td>票数</td>
                   <td>
               <input type="number" ng-model="addTickets"/>
                   </td>
               </tr>
               <tr align="center">
                   <td colspan="2">
               <button ng-click="addFooter()">添加</button>
                   </td>
               </tr>
           </table>
       </script>
   </body>
</html>