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)。请看代码:
<input type="text" placeholder="请在此输入关键字" ng-model="test">
<ul style="padding-bottom: 200px;">
<li ng-repeat="x in array | filter : test">{{x}}</li>
</ul>
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的过滤器简单、便捷地实现筛选效果了:
最后,希望本文对您有所帮助!
个人微信公众号:侦探小禾子,闲聊育儿生活星座塔罗牌,野生法考通过者免费法律咨询,欢迎关注!