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中的Window窗口对象
Jan 16 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
详解javascript高级定时器
Dec 31 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
JavaScript控制台的更多功能
Apr 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
Javascript----文件操作
2007/01/18 Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python批量修改图片大小的方法
2018/07/24 Python
python+pyqt5编写md5生成器
2019/03/18 Python
对Python函数设计规范详解
2019/07/19 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
高二政治教学反思
2014/02/01 职场文书
陈欧的广告词
2014/03/18 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
图书室标语
2014/06/21 职场文书
节能减耗标语
2014/06/21 职场文书
大学生实习证明
2015/06/16 职场文书
怎样写观后感
2015/06/19 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
Go语言特点及基本数据类型使用详解
2022/03/21 Golang