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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
从原生JavaScript到React深入理解
Jul 23 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP加密解密类实例代码
2016/07/20 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js style动态设置table高度
2014/10/21 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
个人自荐信
2013/12/05 职场文书
顶撞老师检讨书
2014/02/07 职场文书
小学教师师德整改措施
2014/09/29 职场文书
2015年度物流工作总结
2015/04/30 职场文书
寒假生活随笔
2015/08/15 职场文书
合作意向书范本
2019/04/17 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
PYTHON InceptionV3模型的复现详解
2022/05/06 Python