使用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 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...
随机推荐
- Go语言规格说明书 之 select语句(Select statements)
go version go1.11 windows/amd64 本文为阅读Go语言中文官网的规则说明书(https://golang.google.cn/ref/spec)而做的笔记,介绍Go语言的 ...
- Mac安装Homebrew记录
在终端输入: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install) ...
- poj3579 二分套二分
和poj3685类似,都是二分答案然后在判断时再二分 这题的内层二分可以用stl代替 /* 二分套二分,思路:升序排序数据,先二分答案x进行判断,判断时枚举每个元素,二分找到和其之差小于等于x的所有值 ...
- poj2823 单调队列初步
什么是单调队列:头元素一直是队列当中的最大值,队列中的值按照递减顺序排列,可以从末尾插入一个元素,或从两段删除元素 1.插入元素,为了保证队列的单调性(这里假设为递减性),在插入元素v时要将对位的元素 ...
- 《剑指offer》-递增数组中找到和为S的(最小)两个元素
题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 首先 ...
- WCF客户端从服务器下载数据
1.打开VS选择控制台项目新建一个解决方案Server,然后添加两个类库Contract和Service. 2.在Contract中添加一个接口IFileDownload using System; ...
- Hibernate之关联关系映射(一对一主键映射和一对一外键映射)
1:Hibernate的关联关系映射的一对一外键映射: 1.1:第一首先引包,省略 1.2:第二创建实体类: 这里使用用户信息和身份证信息的关系,用户的主键编号既可以做身份证信息的主键又可以做身份证信 ...
- [转] 学会fetch的用法
fetch是web提供的一个可以获取异步资源的api,目前还没有被所有浏览器支持,它提供的api返回的是Promise对象,所以你在了解这个api前首先得了解Promise的用法.参考阮老师的文章 那 ...
- java.lang.RuntimeException: Unable to get provider cn.jpush.android.service.DataProvider
转自:https://blog.csdn.net/u014306335/article/details/80355169 Android Studio 3.1.2 报错: java.lang.Runt ...
- Spring3.X jdk8 java.lang.IllegalArgumentException
异常提示: javax.servlet.ServletException: Servlet.init() for servlet springMVC threw exception org.apach ...