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 相关文章推荐
javascript数组去重方法终极总结
Jun 05 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
JQuery学习总结【二】
Dec 01 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
vue总线机制(bus)知识点详解
May 10 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实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
外贸主管求职简历的自我评价
2013/10/23 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
初中差生评语
2014/12/29 职场文书
武侯祠导游词
2015/02/04 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书