Angularjs中如何使用filterFilter函数过滤

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函数过滤的相关知识,希望对大家有所帮助。

时间: 2016-02-03

AngularJS控制器之间的通信方式详解

本文实例讲述了AngularJS控制器之间的通信方式.分享给大家供大家参考,具体如下: 一.利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值:如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型. 基本类型 function San

AngularJS控制器controller给模型数据赋初始值的方法

本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法.分享给大家供大家参考,具体如下: 之前的文章<AngularJS入门示例之Hello World详解>,很简单的就实现了模型数据和页面显示的自动绑定.现在我们使用控制器,给模型赋初始值.如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行 $("#target").attr("value",selfValue); 使用AngularJS代码如下: <!do

AngularJS实现自定义指令与控制器数据交互的方法示例

本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3

AngularJS中一般函数参数传递用法分析

本文实例讲述了AngularJS中一般函数参数传递用法.分享给大家供大家参考,具体如下: 1. 模型参数 直接使用变量名,不要加引号 <!doctype html> <html ng-app="passAter"> <head> <meta charset="utf-8"/> </head> <body> <div ng-controller="passCtrl">

AngularJS中控制器函数的定义与使用方法示例

本文实例讲述了AngularJS中控制器函数的定义与使用方法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp" ng-controller="myCtrl"> <h2>AngularJS函数绑定</h2> <textarea ng-model="message" cols="40" rows="10"></tex

AngularJS控制器之间的数据共享及通信详解

AngularJS 本身已经提供了像指令 Directive 和 服务 Service 一类的方式,来实现数据和代码的共享和复用,但在实际的项目开发中,或许是处于懒惰,亦或是为了便利,总会想在两个控制器之间,直接进行数据的共享通信,或者是函数与方法的调用,这里我们就看看有哪些方法可以满足这个要求. 单例服务 单例服务是 AngularJS 本身支持的数据和代码共享方式,因为是单例的,所有的控制器访问的便是同一份数据.比如,下面的 Service 便可以实现: angular .module('a

AngularJS开发教程之控制器之间的通信方法分析

本文实例讲述了AngularJS开发教程之控制器之间的通信方法.分享给大家供大家参考,具体如下: 一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法是通过scope的继承.假设有两个控制器Parent.Child,Child 在 Parent 内,那Child 可以称为控制器Parent的子控制器,它将继承父控制器Parent的scope.这样,C

AngularJS指令与控制器之间的交互功能示例

本文实例讲述了AngularJS指令与控制器之间的交互功能.分享给大家供大家参考,具体如下: 本节我们来看控制器与指令之间的交互 1.首先来看最简单的,在指令中调用父控制器的方法: <div ng-controller="myController1"> </div> app.controller('myController1',['$scope',function($scope){ $scope.load=function(){ console.log('正在加

angularjs指令中的compile与link函数详解

通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建

AngularJS控制器controller正确的通信的方法

AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro

详解AngularJS控制器的使用

控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可.下面的例子展示了控制器初始化: function my Controller($scope){ $scope.msg="hello,world!"; } 上面这个创建控

详解AngularJS中$filter过滤器使用(自定义过滤器)

1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

详解angularjs获取元素以及angular.element()用法

本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

详解AngularJS中的表单验证(推荐)

AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?

详解AngularJS ng-class样式切换

整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g

详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo

详解angularjs中如何实现控制器和指令之间交互

如果我们具有下面的DOM结构: <div ng-controller="MyCtrl"> <loader>滑动加载</loader> </div> 同时我们的控制器具有如下的签名: var myModule = angular.module("MyModule", []); //首先定义一个模块并在模块下挂载控制器,第二个参数为一个数组,其中函数前面的参数都是会被注入到函数形参上面的 myModule.controll

详解AngularJS中的作用域

范围扮演其视图连接控制器的角色一个特殊的JavaScript对象.范围包含了模型数据.在控制器,模型数据通过$scope对象访问. <script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $s

举例详解AngularJS中ngShow和ngHide的使用方法

今天我们来看看怎样使用Angular的ngShow 和ngHide   指令来完成它们听起来应该完成的,显示和隐藏! 它们应该做的事 ngShow 和ngHide 允许我们显示或隐藏不同的元素.这有助于创建Angular应用时因为我们的单页程序会有许多的移动部件随着应用状态的改变而来来去去. 这些指令的最伟大的部分就是我们不必使用CSS或者JS来操作显示还是隐藏.这些都是由老练的Angular来完成. 用法 想使用ngShow 或ngHide, 只需将指令添加到你想要显示或者隐藏的元素上即可.

详解AngularJS实现表单验证

开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex