Angularjs中如何使用filterFilter函数过滤


Posted in Javascript onFebruary 06, 2016

AngularJS的filter,中文名“过滤器”是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东。AngularJS中有一个filterFilter函数用来对集合过滤,非常方便。

源代码大致如下:

function filterFilter(){
return function(aray, expression comparator){
if(!isArray(array)) return array;
var comparatorType = typeof(comparator),
predicates = [],
evaluatedObjects = [];
predicates.check = function(value){
for(var j = 0; j < predicates.length; jii){
if(!predicates[j](value){
return false;
})
}
return true;
} 
if(comparatorType != 'function'{
if(comparatorType === 'boolean' && comparator){
comparator = function(obj, text){
return angular.equals(obj, text);
}
} else {
comparator = function(obj, text){
...
}
}
}) 
}
}

controller部分如下:

angular
.module('app')
.controller('MainCtrl', ['$scope',
function($scope) {
$scope.users = $scope.users = [
{name: '', email: '', joined: 2015-1-1}
];
$scope.filter = {
fuzzy: '',
name: ''
};
...
}]);

搜索所有任意字段

<input type="text" ng-model="filter.any" >
<tr ng-repeat="user in users | filter: filter.any">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.joined | date}}</td>
</tr>

搜索某个字段

<input type="text" ng-model="filter.name">
<tr ng-repeat="user in users 
| filter: filter.any
| filter: {name: filter.name}">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.joined | date}}</td>
</tr>

如果想name字段完全匹配:

<tr ng-repeat="user in users 
| filter: filter.any
| filter: {name: filter.name}:true">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.joined | date}}</td>
</tr>

搜索时间段

contrlller部分修改为:

angular
.module('app')
.controller('MainCtrl', ['$scope',
function($scope) {
$scope.users = $scope.users = [
{name: '', email: '', joined: 2015-1-1}
];
$scope.filter = {
fuzzy: '',
name: ''
};
$scope.minDate = new Date('January 1, 2000');
$scope.maxDate = new Date();
$scope.min = function(actual, expected) {
return actual >= expected;
};
$scope.max = function(actual, expected) {
return actual <= expected;
};
}]);

页面部分为:

<input type="text" ng-model="fromDate" data-min-date="{{minDate}}">
<input type="text" ng-model="untilDate" data-max-date="{{maxDate}}">
<tr ng-repeat="user in users 
| filter: filter.any
| filter: {name: filter.name}
| filter: {joined: untilDate}:max
| filter: {joined: beforeDate}:min">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.joined | date}}</td>
</tr>

以上所述是小编给大家分享的Angularjs中如何使用filterFilter函数过滤的相关知识,希望对大家有所帮助。

Javascript 相关文章推荐
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 #Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 #Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 #Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 #Javascript
AngularJs中route的使用方法和配置
Feb 04 #Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 #Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 #Javascript
You might like
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python try except 捕获所有异常的实例
2018/10/18 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
一些PHP的面试题
2015/05/06 面试题
怎样自定义一个异常类
2016/09/27 面试题
医务人员自我评价
2014/01/26 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
公证书格式
2015/01/23 职场文书
健康教育主题班会
2015/08/14 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js