angularJS----filter
angularJS过滤器
过滤器（filter）正如其名，作用就是接收一个输入（隐式的接收数据源），通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。
ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。
过滤器的使用：过滤器可以使用一个管道字符（|）添加到表达式和指令中。
具体使用：
currency（格式化货币单位）
格式：| currency：[-货币单位（可以自定义，默认是$）] ：[-小数指定位数（自动四舍五入）,默认是2位小数] 注：本章凡是有[-] ，代表是可选参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-ui/angular.min.js"></script>
</head>
<body ng-app="">
<!-- 内置过滤器：currency（格式化货币） -->
<p>{{ 12 + 12 + 0.01 | currency}} <!--化为货币，默认单位符号为 '$', 小数默认2位 => $12.00--></p>
<p>{{ 12.45 | currency:'￥'}} <!--将12.45格式化为货币，使用自定义单位符号为 '￥', 小数默认2位--></p>
<p>{{ 12.45 | currency:'CHY￥':3}} <!--将12.45格式化为货币，使用自定义单位符号为 'CHY￥', 小数指定3位, 会执行四舍五入操作 --></p>
<p>{{ 12.55 | currency:undefined:2}} <!--将12.55格式化为货币， 不改变单位符号， 小数部分将四舍五入 --></p>
</body>
</html>
效果如下：
date（格式化日期）
格式： | date: MM *dd* yyyy * h* mma 注：y M d h m s E 分别表示 年 月 日 时 分 秒 星期
*号表示随意插入符号（如：- / : 年，月，日 等 ）你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。我们完全可以根据自己的意愿组合出想要的格式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="angular-ui/angular.min.js"></script>
</head>
<body ng-app="">
<p>{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy h:mma"}} <!--使用ISO标准日期格式--></p>
<p>{{ 1432075948123 | date:"MM/dd/yyyy h:mma"}} <!--使用13位（单位：毫秒）时间戳--></p>
<p>{{ 1432075948123 | date:"MM/dd/yyyy h:mma":"UTC"}} <!--指定timezone为UTC --></p>
<p>{{'04/07/2017' | date: 'yyyy年MM月dd日'}}</p>
</body>
</html>
效果如下：
filter（匹配子串）
这个名叫filter的filter（不得不说这名字起的，真让人容易混淆—_—！）用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。格式： | filter ： fn/string/obj 接收一个参数，用来定义子串的匹配规则。个人感觉有点像模糊匹配的意思。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-ui/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myContrl">
<!-- 内置过滤器 filter--> //匹配属性值含有“m”的
<p>{{ arr | filter : 'm' }}</p> //匹配属性值含有20的
<p>{{ arr | filter : 20 }}</p> //参数是对象，匹配name属性中含有 ‘a’的
<p>{{ arr | filter : {name: "a"} }}</p> //参数是函数，指定返回符合条件的项
<p>{{ arr | filter : fn }}</p> <script>
var myApp = angular.module('myApp',[]);
myApp.controller('myContrl', ["$scope",function($scope){
$scope.arr=[
{name:'tom', age: 18},
{name:'sam', age: 19},
{name:'jack', age: 20},
{name:'hellen', age: 21}
];
$scope.fn=function(e){
return e.age< 21;
}
}])
</script>
</body>
</html>
效果如下：
json（格式化json对象）
格式： | json 无参数 json过滤器可以把一个js对象格式化为json字符串 作用就和我们熟悉的JSON.stringify()一样。用法超级简单：
{{ jsonTest | json}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-ui/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myContrl">
<!-- 内置过滤器 json-->
<p>{{ oJson | json }}</p> <script>
var myApp = angular.module('myApp',[]);
myApp.controller('myContrl', ["$scope",function($scope){
$scope.oJson=[
{
"name": "jjk",
"age": 18
},
{
"name": "dk",
"age": 19
}
];
$scope.fn=function(e){
return e.age< 21;
}
}])
</script>
</body>
</html>
效果如下：
limitTo（限制数组长度或者字符串长度）
limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度 注：只能从数组或者字符串的开头截取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-ui/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myContrl">
<!-- 内置过滤器 limitTo-->
<p>{{ oJson | limitTo : 1 }}</p> <script>
var myApp = angular.module('myApp',[]);
myApp.controller('myContrl', ["$scope",function($scope){
$scope.oJson=[
{
"name": "jjk",
"age": 18
},
{
"name": "dk",
"age": 19
}
];
$scope.fn=function(e){
return e.age< 21;
}
}])
</script>
</body>
</html>
效果如下：
lowercase(小写)
把数据转化为全部小写。格式 ： | lowercase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-ui/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myContrl">
<!-- 内置过滤器 lowercase-->
<p>{{ str |lowercase }}</p> <script>
var myApp = angular.module('myApp',[]);
myApp.controller('myContrl', ["$scope",function($scope){
$scope.str= "Hello, World!" }])
</script>
</body>
</html>
效果如下：
uppercase(大写）
把数据转化为全部小写。格式： | uppercase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-ui/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myContrl">
<!-- 内置过滤器 uppercase-->
<p>{{ str |uppercase }}</p> <script>
var myApp = angular.module('myApp',[]);
myApp.controller('myContrl', ["$scope",function($scope){
$scope.str= "Hello, World!" }])
</script>
</body>
</html>
效果如下：
number(格式化数字)
格式化数字 为一个数字加上千位分割， 同时接收一个参数，指定保留几位小数 格式： | number ：[-num]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="angular-ui/angular.min.js"></script>
</head>
<body ng-app="">
{{ "3456789" | number}} <br />
{{ 12345678 | number:3}}
</body>
</html>
效果如下：
orderBy(排序)
将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-ui/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myContrl">
<!-- 内置过滤器 orderBy--> //按照age属性值排序
<div>{{ arr | orderBy : "age"}}</div> //按照函数的返回值排序
<div>{{ arr | orderBy : fn}}</div> //如果age相同，则按name排序
<div>{{ arr | orderBy : ["age","name"]}}</div> <script>
var myApp = angular.module('myApp',[]);
myApp.controller('myContrl', ["$scope",function($scope){
$scope.arr=[
{name:'tom', age: 18},
{name:'sam', age: 19},
{name:'jack', age: 20},
{name:'hellen', age: 20}
];
$scope.fn=function(e){
return e.name;
}
}])
</script>
</body>
</html>
效果如下：
内置的过滤器就介绍到这里了
现在来讲讲自定义的过滤器 ：filter的自定义方式很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。
形式： var app=angular.module("myapp", []).filter("过滤器名称", function(){ return function(){....} }，返回的函数接受2个参数：参数1--表达式的值，参数2--可选
demo如下：
myAppModule.filter("reverse",function(){
return function(input,uppercase){
var out = "";
for(var i=0 ; i<input.length; i++){
out = input.charAt(i)+out;
}
if(uppercase){
out = out.toUpperCase();
}
return out;
}
});
name | reverse input就是代表name的值。 具体实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>name:{{name}}</div>
<div>reverse:{{name | reverse}}</div>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl",["$scope",function($scope){
$scope.name = "tom";
}]); myApp.filter("reverse", function(){
return function(input){
for(var i=0;i<input.length;i++){
var str=input.charAt(i)
}
return str;
}
})
</script> </body>
</html>
chrome显示如下：
ok，过滤器简单的总结已经差不多了，细节问题以后会慢慢补充！
angularJS----filter的更多相关文章
- AngularJS filter:search 是如何匹配的 ng-repeat filter:search ，filter:{$:search}，只取repeat的item的value 不含label
1. filter可以接收参数,参数用 : 进行分割,如下: {{ expression | filter:argument1:argument2:... }} 2. filter参数是 对象 ...
- angularjs filter 详解
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...
- AngularJS Filter用法详解【转+实际测试】 格式化货币
AngularJS内建了一些常用的Filter,我们一一来看一下. currencyFilter(currency): 用途:格式化货币 方法原型: function(amount, currency ...
- 转载 angularJS filter 过滤器
angularjs中的filter(过滤器) 标签: angularjsfilter 源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/ f ...
- AngularJs filter 过滤器
Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...
- Part 12 Angularjs filter by multiple properties
In the example below, we are using multiple search textboxes. As you type in the "Search name&q ...
- angularjs filter cut string
angular.module('App.controllers.MyCtrl', []) .controller('MyCtrl', function (my) {}) .filter('cut', ...
- AngularJs filter 过滤器基础【转】
Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...
- angularjs filter详解
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果. 主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等. ng内置了一些过滤器, ...
- AngularJS的Filter用法详解
上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式 ...
随机推荐
- struts.xml 配置文件的主要元素
1.package元素 作用: 在struts2的配置文件中引入了面向对象思想.分包管理,易于管理动作类,便于模块化开发动作类. 属性: name:包的名称.名称唯一. extends:一般情况下需要 ...
- googleBigTable
Bigtable是一个分布式的结构化数据存储系统,它被设计用来处理海量数据:通常是分布在数千台普通服务器上的PB级的数据.Google的很多项目使用Bigtable存储数据,包括Web索引.Googl ...
- cocos2d-x 2.x.x 新建工程 android下的 org文件夹丢失
cocos2d-x 2.x.x 新建工程之后... 打开android项目..会发现src下没有org文件... 解决方法一: cocos2d-x-2.2.0\cocos2dx\platform\an ...
- HTTP服务器(3)
功能完整的HTTP服务器 导语 这个一个功能完备的HTTP服务器.它可以提供一个完整的文档输,包括图像,applet,HTML文件,文本文件.它与SingleFileHttpServer非常相似,只不 ...
- Spring JdbcTemplate的queryForList(String sql , Class<T> elementType)返回非映射实体类的解决方法
Spring JdbcTemplate的queryForList(String sql , Class<T> elementType)易错使用 一直用ORM,今天用JdbcTemplate ...
- 使用C++11实现一个半同步半异步线程池
前言 C++11之前我们使用线程需要系统提供API.posix线程库或者使用boost提供的线程库,C++11后就加入了跨平台的线程类std::thread,线程同步相关类std::mutex.std ...
- 20145303刘俊谦 Java 代码托管
(20145303刘俊谦) Java 第三周代码托管 这是最近保存下来的代码,今天一起上传的,有很多在代码学习过程中无意识删掉了:
- Spring笔记（二）
1. SPRING aop入门 Aop 面向切面编程 在一个大型的系统中,会写很多的业务类--业务方法 同时,一个大型的系统中,还有很多公共的功能:比如事务管理.日志处理.缓存处理..... 1.1 ...
- jz2440使用openjtag+openocd+eclipse调试【学习笔记】
平台:jz2440 作者:庄泽彬(欢迎转载,请注明作者) 说明:韦东山二期视频学习笔记 交叉编译工具:arm-linux-gcc (GCC) 3.4.5 eclipse版本:eclipse-cpp-l ...
- zookeeper项目使用几点小结
背景 前段时间学习了zookeeper后,在新的项目中刚好派上了用场,我在项目中主要负责分布式任务调度模块的开发,对我自己来说是个不小的挑战. 分布式的任务调度,技术上我们选择了zookeeper,具 ...