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

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

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

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

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

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

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

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

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题3:AngularJS:模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息/title style * { margin 3360 auto；padd : 0；}车身{ text-align :居中；余量： 50px自动；}表格{ margin-top : 30px；} .btn {背景：矢车菊蓝；宽度： 100像素；高度： 50px} tr : th-child(2n){ background : # 666；}/样式脚本src='http:/angular-1。5 .5/棱角分明。js/主模板var myapp=angular.module('myapp '，[])；//控制器myapp.controller('myCtrl '，函数($ scope){ $ scope。数据=[{ name : '张三，wei: '控球后卫，hao:'11 '，飘：'999'}，{name: '李四，wei: '大前锋，hao:'21 '，飘：'888'}，{name: '王五，wei: '小前锋，hao:'23 '，飘：'777'}，{name: '赵六，wei: '中锋，hao:'10 '，飘：'666'}，{name: '周七，wei: '得分后卫，hao:'1 '，飘：'555'}，]$作用域。名称=' '；$ scope.search2=$scope .$watch('name '，function(value){ if(value。索引of('枪')!=-1) { alert('输入内容含有敏感字');$ scope.name=} else { $ scope。搜索2=$ scope。姓名；} }) $scope.order='-请选择-';//排序$ scope。pai=function(){ if($ scope。秩序！='-请选择-') { if($scope.order=='票数正叙){控制台。日志(' 0 ')；返回false} else {返回true} }返回false} //添加球员$ scope.show=false$ scope。add=function(){ $ scope。show=true} $ scope . uname=$ scope . uwei=$ scope . uhao=$ scope . UPI ao=$ scope。adduser=function(){ if($ scope。uname==' ' | | $作用域。uwei==' ' | | $作用域。uhao==' ' | | $作用域。UPI ao==' '){ alert('此项为必填项');} else { for(var I=0；I $ scope。数据。长度；i ) { if($scope.data[i]).name==$scope.uname) { alert('此球员已存在');$ scope . uname=$ scope . uwei=$ scope . uhao=$ scope . UPI ao=打破；} else if(I==$ scope。数据。length-1){ $ scope。数据。push({ name : $ scope。uname，wei:$scope.uwei，hao:$scope.uwei，pau : $ scope。UPI ao })；$ scope . uname=$ scope . uwei=$ scope . uhao=$ scope . UPI ao=$ scope . show=false打破；} } } } })/脚本/头体ng-app=' myapp ' ng-controller=' myCtrl '查询：输入类型='text' ng-model='name '

排序：

选择ng-model='order '选项-请选择-/选项选项票数倒叙/option选项票数正叙/option/selectbrbutton ng-click=' add()' class=' BTN '添加球员/buttontable边框='1px soilde #000 '宽度='400px' tr th姓名/th位置/th球号/th票数/th/tr ng-repeat='数据中的项目|筛选器：搜索2 |按： ' Piao ' : pai()' TD排序{ { item }。名称} }/TD TD { { item }。Wei } }/TD TD { { item。Hao } }/TD { { item。朴} }/TD/tr/表格边框=' 1px solide # 000 ' ng-show=' show ' tr TD姓名：/TD TD输入类型=' text ' ng-model=' uname '/TD/tr TD位置：/TD TD输入类型=' text ' ng-model=' uwei '/TD/tr TD球号：/TD TD输入类型=' text ' ng-model=' uhao '/TD/tr TD票数：/TD TD输入类型=' text ' ng-model=' UPI ao '/TD/tr align=' center ' TD按钮ng-click=' adduser()'添加/button/td/tr /table/body/html总结

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