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实现的页面日历
Nov 04 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
Jquery Fade用法详解
Nov 06 jQuery
微信小程序实现购物车小功能
Dec 30 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
php curl 伪造IP来源的实例代码
2012/11/01 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
PHP制作万年历
2015/01/07 PHP
php页面缓存方法小结
2015/01/10 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
js实现表格字段排序
2014/02/19 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
法律工作求职自荐信
2013/10/31 职场文书
初中三年学生的学习自我评价
2013/11/13 职场文书
推荐信格式范文
2014/05/09 职场文书
主题班会演讲稿
2014/05/22 职场文书
搞笑车尾标语
2014/06/23 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
机动车登记业务委托书
2014/10/08 职场文书
廉政承诺书
2015/01/19 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python