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

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

项目中有时会有这样的需求：用input输入框实现对select下拉框或者一个列表的筛选功能。（这是作者写的一个小demo，请忽略样式）

筛选的结果：

那么怎么用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的过滤器简单、便捷地实现筛选效果了：

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

个人微信公众号：小禾子的魔法盒子，欢迎关注！