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 相关文章推荐
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
消防安全检查制度
2014/02/04 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
财产公证书样本
2014/04/04 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python