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 学习笔记二 字符串拼接
Mar 28 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
在js中修改html body的样式
Nov 11 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
小议Javascript中的this指针
2010/03/18 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
微信小程序实现原生步骤条
2019/07/25 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现超简单的视频对象提取功能
2018/06/04 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
如何让python的运行速度得到提升
2020/07/08 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
2014年企业工会工作总结
2014/11/12 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
检察院起诉意见书
2015/05/20 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
Python基础知识之变量的详解
2021/04/14 Python
利用Python多线程实现图片下载器
2022/03/25 Python
Python何绘制带有背景色块的折线图
2022/04/23 Python