AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)

2019-11-19 15:06:06

字体：大中小

来源：转载

供稿：网友

注：添加球员的功能无指定技术要求，添加球员的页面也无具体样式要求。

1.实现上图页面所有元素，页面布局规整，跟上图效果一致

2.实现文案显示，按效果显示

3.实现查询，实现查询敏感词过滤，实现查询后列表变化

4.实现倒序，实现正序，下拉列表排序效果都实现

5.按钮背景一致，按钮样式

6.实现添加球员页面，添加球员页面样式，添加球员功能，添加球员必填项判断，添加完球员后能显示在表格内，已存在球员判重。

7.表格样式跟上图样式一致

代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>3：AngularJS：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息</title>  <style>    *{      margin: auto;      padding: 0;    }    body{      text-align: center;      margin: 50px auto;    }    table    {      margin-top: 30px;    }    .btn    {      background: cornflowerblue;      width: 100px;      height: 50px;    }    tr:nth-child(2n){      background: #666;    }  </style>  <script src="../angular-1.5.5/angular.js"></script>  <script>    //主模板    var myapp=angular.module("myapp",[]);    //控制器    myapp.controller("myCtrl",function ($scope) {      $scope.data=[        {name:"张三",wei:"控球后卫",hao:"11",piao:"999"},        {name:"李四",wei:"大前锋",hao:"21",piao:"888"},        {name:"王五",wei:"小前锋",hao:"23",piao:"777"},        {name:"赵六",wei:"中锋",hao:"10",piao:"666"},        {name:"周七",wei:"得分后卫",hao:"1",piao:"555"},      ]      $scope.name="";      $scope.search2="";      $scope.$watch("name",function (value) {        if(value.indexOf("枪")!=-1)        {          alert("输入内容含有敏感字");          $scope.name="";        }        else        {          $scope.search2=$scope.name;        }      })      $scope.order="-请选择-";      //排序      $scope.pai=function () {        if( $scope.order!="-请选择-")        {          if( $scope.order=="票数正叙")          {            console.log("0");            return false;          }          else          {            return true;          }        }        return false;      }      //添加球员      $scope.show=false;      $scope.add=function () {        $scope.show=true;      }      $scope.uname="";      $scope.uwei="";      $scope.uhao="";      $scope.upiao="";      $scope.adduser=function () {        if( $scope.uname=="" || $scope.uwei=="" || $scope.uhao=="" || $scope.upiao=="")        {          alert("此项为必填项");        }        else        {          for(var i=0;i<$scope.data.length;i++)          {            if($scope.data[i].name==$scope.uname)            {              alert("此球员已存在");              $scope.uname="";              $scope.uwei="";              $scope.uhao="";              $scope.upiao="";              break;            }            else if(i==$scope.data.length-1)            {              $scope.data.push({name:$scope.uname,wei:$scope.uwei,hao:$scope.uwei,piao:$scope.upiao});              $scope.uname="";              $scope.uwei="";              $scope.uhao="";              $scope.upiao="";              $scope.show=false;              break;            }          }        }      }    })  </script></head><body ng-app="myapp" ng-controller="myCtrl">

查询:<input type="text" ng-model="name">

排序:

<select ng-model="order">   <option>-请选择-</option>   <option>票数倒叙</option>   <option>票数正叙</option></select><br><button ng-click="add()" class="btn">添加球员</button><table border="1px soilde #000" width="400px">   <tr>     <th>姓名</th>     <th>位置</th>     <th>球号</th>     <th>票数</th>   </tr>  <tr ng-repeat="item in data|filter:search2|orderBy:'piao':pai()">    <td>{{item.name}}</td>    <td>{{item.wei}}</td>    <td>{{item.hao}}</td>    <td>{{item.piao}}</td>  </tr></table> <table border="1px solide #000" ng-show="show">   <tr>     <td>姓名:</td>     <td><input type="text" ng-model="uname"></td>   </tr>   <tr>     <td>位置:</td>     <td><input type="text" ng-model="uwei"></td>   </tr>   <tr>     <td>球号:</td>     <td><input type="text" ng-model="uhao"></td>   </tr>   <tr>     <td>票数:</td>     <td><input type="text" ng-model="upiao"></td>   </tr>   <tr align="center"><td><button ng-click="adduser()">添加</button></td></tr> </table></body></html>

总结

以上所述是小编给大家介绍的AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：JS去掉字符串末尾的标点符号及删除最后一个字符的方法

下一篇：基于js中this和event 的区别(详解)