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 播放器 控制
Jan 22 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 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&amp;mysql(一)
2006/10/09 PHP
php生成缩略图的类代码
2008/10/02 PHP
php实现网站插件机制的方法
2009/11/10 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Django admin美化插件suit使用示例
2017/12/12 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python 字典的打印实现
2019/09/26 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python虚拟环境venv用法详解
2020/05/25 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
审核会计岗位职责
2013/11/08 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
工厂见习报告范文
2014/10/31 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
上班迟到检讨书范文
2015/05/06 职场文书