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函数进行过滤的更多相关文章

  1. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  2. angularjs中如何在异步请求执行完以后再执行其他函数?

    angularjs中如何在异步请求执行完以后再执行其他函数? 之前脑袋回路就是从上到下的执行js,直到有一次我的页面上已经显示了空才走到angularjs里的$http的成功回调函数里,然后才开始正视 ...

  3. Python中字符串String的基本内置函数与过滤字符模块函数的基本用法

    Python中字符串String的基本内置函数与用法 首先我们要明白在python中当字符编码为:UTF-8时,中文在字符串中的占位为3个字节,其余字符为一个字节 下面就直接介绍几种python中字符 ...

  4. 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink

     壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...

  5. AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

  6. AngularJS中有关Directive的汇总

    本篇通过几个例子对AngularJS中的Directive进行汇总. 例子1,单向绑定和双向绑定 <html ng-app="myApp"> <head> ...

  7. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  8. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  9. 关于angularjs中的jQuery

    关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...

随机推荐

  1. Ex 6_9 某个字符串处理语言提供了一个将字符串一分为二的基本操作..._第六次作业

    设字符串的长度为n,整型数组arr[0. . .n-1]的第一个数和最后一个数为开始点与结束点的位置,中间的数为拆分点的位置,设cost[i,j]为第i个分割点到第j个分割点的最小代价,两个分割点之间 ...

  2. 简单对比 Libevent、libev、libuv

    Libevent.libev.libuv三个网络库,都是c语言实现的异步事件库Asynchronousevent library). 异步事件库本质上是提供异步事件通知(Asynchronous Ev ...

  3. spark简单总结—短小精悍

    Spark是基于内存计算的大数据并行计算框架.因为其基于内存计算,较Hadoop中MapReduce计算框架具有更高的实时性,同时保证了高效容错性和可伸缩性.从2009年诞生于AMPLab到现在已经成 ...

  4. 【C++ Primer | 15】虚继承

    虚基类 一.虚基类介绍 多继承时很容易产生命名冲突,即使我们很小心地将所有类中的成员变量和成员函数都命名为不同的名字,命名冲突依然有可能发生,比如非常经典的菱形继承层次.如下图所示: 类A派生出类B和 ...

  5. ***PHP基于H5的微信支付开发详解(CI框架)

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  6. GItlab作CI/CD时,想快点,有啥招?

    如果希望.m2文件有存缓,或是不要每次从dockerhub上找镜像(有的是本地镜像,远程没有的) 那么,gitlab-runner的config.toml初步优化文件如下: concurrent = ...

  7. CentOS6.8安装RabbitMQ

    1.安装erlang 安装依赖包: yum install xmlto gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel unixODBC ...

  8. Python hashlib、hmac加密模块

    #用于加密的相关操作,3.x里代替了md5模块和sha模块,主要提供sha1,sha224,sha256,sha384,sha512,md5算法 #sha2为主流加密算法,md5加密方式不如sha2 ...

  9. Jenkins Pipline语法

    引用自:http://baijiahao.baidu.com/s?id=1582812185263227836&wfr=spider&for=pc 引用自:https://www.cn ...

  10. Storm消息容错机制(ack-fail机制)

    storm消息容错机制(ack-fail) 1.介绍 在storm中,可靠的信息处理机制是从spout开始的. 一个提供了可靠的处理机制的spout需要记录他发射出去的tuple,当下游bolt处理t ...