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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
js中的面向对象入门
Mar 06 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 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脚本[带参数]的方法
2010/01/22 PHP
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
Ajax基础知识详解
2017/02/17 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
浅谈Python中的私有变量
2018/02/28 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
法律进社区实施方案
2014/03/21 职场文书
保护环境建议书400字
2014/05/13 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
社保转移委托书范本
2014/10/08 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
捐资助学感谢信
2015/01/21 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript