使用AngularJS中的filterFilter函数进行过滤
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函数进行过滤的更多相关文章
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- angularjs中如何在异步请求执行完以后再执行其他函数?
angularjs中如何在异步请求执行完以后再执行其他函数? 之前脑袋回路就是从上到下的执行js,直到有一次我的页面上已经显示了空才走到angularjs里的$http的成功回调函数里,然后才开始正视 ...
- Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
Python中字符串String的基本内置函数与用法 首先我们要明白在python中当字符编码为:UTF-8时,中文在字符串中的占位为3个字节,其余字符为一个字节 下面就直接介绍几种python中字符 ...
- 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink
壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...
- AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
- AngularJS中有关Directive的汇总
本篇通过几个例子对AngularJS中的Directive进行汇总. 例子1,单向绑定和双向绑定 <html ng-app="myApp"> <head> ...
- AngularJS中get请求URL出现跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- 关于angularjs中的jQuery
关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...
随机推荐
- Python-HTML CSS 练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【转】crontab实用手册
前言 crontab是Unix和Linux用于设置周期性被执行的指令,是互联网很常用的技术,很多任务都会设置在crontab循环执行,如果不使用crontab,那么任务就是常驻程序,这对你的程序要求比 ...
- 步步为营-66-Socket通信
1.0 版本 1.1 服务器端 using System; using System.Collections.Generic; using System.Linq; using System.Net; ...
- 2018-2019-2 网络对抗技术 20165333 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165333 Exp4 恶意代码分析 原理与实践说明 1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或E ...
- 【C++ Primer | 19】嵌套类、局部类
嵌套类 #include <iostream> using namespace std; class c1 { public: int a; void foo(); class c2 { ...
- B 找规律
Description 对于正整数n,k,我们定义这样一个函数f,它满足如下规律f(n,k=1)=-1+2-3+4-5+6...nf(n,k=2)=-1-2+3+4-5-6...nf(n,k=3)=- ...
- 记一次Oracle分区表错误:ORA-14400: 插入的分区关键字未映射到任何分区
https://blog.csdn.net/xdyzgjy/article/details/42238735
- 存储过程,存储函数(Oracle)
存储过程和存储函数 指存储在数据库中供所有用户程序调用的子程序叫存储过程.存储函数. 存储过程和存储函数的区别? 存储函数:可以通过return 语句返回函数值. 存储过程:不能 除此之外我们可以认为 ...
- BZOJ2333 [SCOI2011]棘手的操作 堆 左偏树 可并堆
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ2333 题意概括 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i ...
- scanf清除缓存区
为什么需要清除scanf缓存区呢?看一个例子: int main() { int a,b; scanf("%d",&a); scanf("%d",&am ...