本文实例讲述了有角的实现下拉框模糊查询功能。分享给大家供大家参考，具体如下：

前两天研究了一下angularjs，不得不说开发的手动音量调节思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。

写了个搜索下拉框的演示，注释在里边都写了，就不再这罗嗦了。

1.普通方式实现

！DOCTYPE html html head lang=' zh _ CN ' meta charset=' utf-8 ' title www .JB 51。净角度模糊匹配/title脚本src=' http :http://apps。bdimg。com/libs/angular。js/1。4 .6/棱角分明。量滴js ' type=' text/JavaScript '/script link href=' http://libs。百度。com/bootstrap/3。0 .3/CSS/bootstrap。量滴CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表脚本src=width :200 px ' ng-click=' hidden=！hidden ' value=' { { search field } } '//input div ng-hide=' hidden ' select style=' width :200 px ' ng-change=' change(x)' ng-model=' x ' multiple option ng-repeat=' data in data ' { data } }/option/select/div div ph1a angular输入选择框/h1/pph2逻辑实现步骤/h2/pp1文本框做输入，并监控器变化事件，在变化事件中获取输入值，获取的输入值与选择框中的各个下拉项进行比较/pp2如果包含则只显示包含的部分，不包含则显示全部/pdivscriptvar app=angular。模块(' myApp '，[])；app.controller('myCtrl '，函数($ scope){ $ scope。data=[' key 4 '，' xyz '，' key3 '，' xxxx '，' key2 '，' value2 '，' key1 '，' value 1 ']；//下拉框选项$ scope。tempdatas=$ scope。数据；//下拉框选项副本$ scope.hidden=true//选择框是否隐藏$ scope.searchField=//文本框数据//将下拉选的数据值赋值给文本框$ scope。change=function(x){ $ scope。搜索字段=x；$ scope.hidden=true} //获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换$ scope。changekyvalue=function(v){ var new date=[]；//临时下拉选副本//如果包含就添加angular.forEach($scope.datas)，函数（数据、索引、数组){ if(数据。indexof(v)=0){新日期。unshift(数据);} });//用下拉选副本替换原来的数据$ scope.datas=newDate//下拉选展示$ scope.hidden=false//如果不包含或者输入的是空字符串则用初始变量副本做替换if($ scope。数据。length==0 | | ' '===v){ $ scope。datas=$ scope。tempdatas}控制台。日志($ scope)。数据)；}});/script/html2 .指令方式实现

！DOCTYPE html html head lang=' zh _ CN ' meta charset=' utf-8 ' title www .JB 51。净角度模糊匹配/title脚本src=' http :http://apps。bdimg。com/libs/angular。js/1。4 .6/棱角分明。量滴js ' type=' text/JavaScript '/script link href=' http://libs。百度。com/bootstrap/3。0 .3/CSS/bootstrap。量滴CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表脚本src=输入选择框自定义指令方式/h1/pph2逻辑实现步骤/h2/pp1文本框做输入，并监控器变化事件，在变化事件中获取输入值，获取的输入值与选择框中的各个下拉项进行比较/pp2如果包含则只显示包含的部分，不包含则显示全部/pdivscriptvar app=angular。模块(' myApp '，[])；app.controller('myCtrl '，函数($ scope){ $ scope。data=[' key 4 '，' xyz '，' key3 '，' xxxx '，' key2 '，' value2 '，' key1 '，' value 1 ']；//下拉框选项});app.directive('selectSearch '，function($ compile){ return { restrict : ' AE '，//attribute或元素scope: { datas: '='，//bindAttr: '=' }，template: '输入类型=' test ' ng-change=' changekyvalue(search field)' ng-model=' search field ' style=' display : block；宽度：200 px ' ' ' ng-click=' hidden=！hidden ' value=' { { search field } } '//input ' ' div ng-hide=' hidden ' ' ' ' select style=' width :200 px ' ng-change=' change(x)' ng-model=' x ' multiple ' ' option ng-repeat=' data in data ' { { data } }/option ' '/select ' '/div '，//replace: true，link: function($scope，elem，attr，ctrl){ $ scope。tempdatas=$ scope。数据；//下拉框选项副本$ scope.hidden=true//选择框是否隐藏$ scope.searchField=//文本框数据//将下拉选的数据值赋值给文本框$ scope。change=function(x){ $ scope。搜索字段=x；$ scope.hidden=true} //获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换$ scope。changekyvalue=function(v){ var new date=[]；//临时下拉选副本//如果包含就添加angular.forEach($scope.datas)，函数（数据、索引、数组){ if(数据。indexof(v)=0){新日期。unshift(数据);} });//用下拉选副本替换原来的数据$ scope.datas=newDate//下拉选展示$ scope.hidden=false//如果不包含或者输入的是空字符串则用初始变量副本做替换if($ scope。数据。length==0 | | ' '===v){ $ scope。datas=$ scope。tempdatas}控制台。日志($ scope)。数据)；} } };});/script/html最终效果如下：

注意这里对挑选标签设置了多个的属性，所以在页面上投入标签能覆盖挑选标签

如果不用多个的属性，需自行用差异模拟实现挑选标签效果

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。