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中JSON.parse的影响概述
Jul 17 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
js css自定义分页效果
Feb 24 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
实例讲解JavaScript 计时事件
Jul 04 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 cron中的批处理
2008/09/16 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
Python 专题三 字符串的基础知识
2017/03/19 Python
python 读写中文json的实例详解
2017/10/29 Python
python自动化报告的输出用例详解
2018/05/30 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python基础教程之while循环
2019/08/14 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
解析python实现Lasso回归
2019/09/11 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
学生打架检讨书大全
2014/01/23 职场文书
高中军训感言800字
2014/03/05 职场文书
学籍证明模板
2014/11/21 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
停水通知
2015/04/16 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python