angularJS自定义过滤器筛选列表/下拉框
来源:互联网 发布:天创息壤是网络集资吗 编辑:程序博客网 时间:2024/05/17 03:41
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的过滤器简单、便捷地实现筛选效果了:
最后,希望本文对您有所帮助!
1 0
- angularJS自定义过滤器筛选列表/下拉框
- angularjs-搜索框下拉列表
- AngularJS 过滤器\自定义过滤器 $filter
- AngularJS过滤器以及自定义过滤器
- angularJS自定义过滤器使用
- angularJS---自定义过滤器
- angularjs自定义过滤器demo
- angularjs自定义过滤器
- Angularjs自定义过滤器
- angularJS 自定义过滤器
- 《AngularJs》$filter 自定义过滤器
- angularjs自定义过滤器
- AngularJs[自定义过滤器]
- AngularJs自定义过滤器
- angularJS filter自定义过滤器
- 【AngularJS】自定义过滤器
- angularjs-自定义过滤器示例
- AngularJs自定义过滤器
- jquery实现高德地图点击识别marker数组
- Java的位运算符详解实例——与(&)、非(~)、或(|)、异或(^)
- oracle expdp 导出分区表的部分分区的数据
- LTspice introduction
- jsonp 跨域 原理 使用
- angularJS自定义过滤器筛选列表/下拉框
- 题目1452:搬寝室
- JavaScript学习笔记————JavaScript的应用环境
- 在VC/MFC中响应键盘按键
- Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]
- PAT乙级1061-1065
- SQL、T-SQL与PL-SQL的区别
- 设计模式六大原则
- mysql插入太多数据导致MySQL server has gone away