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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 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中替换换行符的几种方法小结
2012/10/15 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
python连接oracle数据库实例
2014/10/17 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python实现队列的方法
2015/05/26 Python
深入浅出学习python装饰器
2017/09/29 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
如何进行Linux分区优化
2016/09/13 面试题
大学生求职推荐信
2013/11/27 职场文书
校园新闻广播稿
2014/01/10 职场文书
寒山寺导游词
2015/02/03 职场文书
转变工作作风心得体会
2016/01/23 职场文书
2016年十一促销广告语
2016/01/28 职场文书