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操作JSON要领详细总结
Aug 25 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 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
Zend公司全球首推PHP认证
2006/10/09 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
新手简单了解vue
2019/05/29 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Python类反射机制使用实例解析
2019/12/30 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
交通安全教育制度
2014/02/02 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2015年计划生育责任书
2015/05/08 职场文书
博士论文答辩开场白
2015/06/01 职场文书
运动会宣传稿100字
2015/07/23 职场文书
宿舍管理制度范本
2015/08/07 职场文书
子女赡养老人协议书
2016/03/23 职场文书
Python Socket编程详解
2021/04/25 Python
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL