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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
vue 实现上传组件
May 31 Vue.js
浅析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中数据的批量导入(csv文件)
2006/10/09 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
JavaScript如何操作css
2020/10/24 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
T3官网:头发造型工具
2019/12/26 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
幼儿园实习自我鉴定
2013/12/15 职场文书
男方父母证婚词
2014/01/12 职场文书
社区志愿者培训方案
2014/06/10 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
离职告别感言
2015/08/04 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android