使用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 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...
随机推荐
- Expm 9_2 有向图的强连通分量问题
[问题描述] 给定一个有向图,设计一个算法,求解并输出该图的各个强连通分量. package org.xiu68.exp.exp9; import java.util.ArrayList; imp ...
- css 中两个class之间没有空格与有空格有什么区别
第一个匹配: <div class="ul item"></div>:无法匹配:<div class="ul"></d ...
- 洛谷P1970 花匠
传送门 首先可以知道,如果一个序列是连续上升的,那么只需要取这一个序列中最高的元素即可,因为取其它的不能保证大于后面的.连续下降的序列同理.而这些恰好就是波峰和波谷. 所以遇到 $ j $ 比之前的 ...
- ambari下的flume和kafka整合
1.配置flume #扫描指定文件配置 agent.sources = s1 agent.channels = c1 agent.sinks = k1 agent.sources.s1.type=ex ...
- 扩展欧几里得,解线性同余方程 逆元 poj1845
定理:对于任意整数a,b存在一堆整数x,y,满足ax+by=gcd(a,b) int exgcd(int a,int b,int &x,int &y){ ){x=,y=;return ...
- Ajax异步验证登陆或者注册
首先介绍一个不错的学习Ajax的中文网站:http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML.详细介绍见上面的网址 ...
- 扩展BSGS算法
求解A^x ≡ B mod P (P不一定是质数)的最小非负正整数解 先放几个同余定理: 一.判断如果B==1,那么x=0,算法结束 二.若gcd(A,P)不能整除 B,则 无解,算法结束 三.若gc ...
- java语言打印上三角和下三角,进一步得到九九乘法表
关于下面两种图形的打印问题 ***** 与 * **** ** *** *** ** **** * ***** 一:程序 1.先打印下三角 2.结果 3.后打印上三角 4.结果 二:知识点 1.f ...
- 090实战 Hadoop离线项目介绍(不包括程序)
一:项目场景 1.需求分析 根据用户行为数据进行程序的处理,得到结果保存到关系型数据库中 需要收集用户(系统使用者)在不同客户端上产生的用户行为数据,最终保存到hdfs上 需要明确收集字段的相关信息, ...
- hdu 1576 A/B 【扩展欧几里得】【逆元】
<题目链接> <转载于 >>> > A/B Problem Description 要求(A/B)%9973,但由于A很大,我们只给出n(n=A%9973)( ...