angularJS自定义过滤器筛选列表/下拉框

angularJS过滤器实现筛选列表/下拉框

项目中有时会有这样的需求：用input输入框实现对select下拉框或者一个列表的筛选功能。（这是作者写的一个小demo，请忽略样式）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b6WZdd1i-1595576180705)(https://img-blog.csdn.net/20170426122211652?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSmFuZUxpdHRsZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]
筛选的结果：

那么怎么用angularJS简单、便捷地实现这一功能呢？答案是：过滤器(filter)。请看代码：

    
{{x}}

PS：小demo中为了简便，写了行内式css，请忽略，实际项目中不建议使用行内样式，不利于后期维护和版本更新。
代码说明：input的ng-model绑定的是test，然后列表/下拉框循环的时候，在循环的数组后面加上该过滤器‘test’即可。

说明：此demo是在项目引用了angularJS的情况下使用的，对应的controller.js中并不需要再写关于过滤器的函数或者别的什么，只需要声明列表/下拉框循环用的数组就行了：

$scope.array = [ 222,323,533,21,623,2,314,2341,457,5678,789,23 ];

这样就可以用angularJS的过滤器简单、便捷地实现筛选效果了：

最后，希望本文对您有所帮助！

个人微信公众号：侦探小禾子，闲聊育儿生活星座塔罗牌，野生法考通过者免费法律咨询，欢迎关注！