angularJS过滤器
一、过滤器的作用
过滤器用来格式化需要展示给用户的数据。
在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串转换成大写可以对字符串中的每个字符都单独进行转换操作，也可以使用过滤器：{{name | uppercase }}
◇给过滤器传参数：
{{123|currency}}
{{123.3213132|number:2}}
{{'tanzhenngqiang'|uppercase}}
{{'TANZHENGQIANG'|lowercase}}
◆number过滤器将数字格式化成文本。它的第二个参数是可选的，用来控制小数点后截取的位数。
如果传入了一个非数字字符，会返会空字符串
◆可以用|符号作为分割符来同时使用多个过滤器。
二、filter过滤器
可以从给定数组中选择一个子集，并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。例如，在做客户端搜索时，可以从一个数组中立刻过滤出所需的结果。
这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。
①过滤包含字母e的单词
{{['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
②过滤对象
{ 'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza' },
{ 'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indianfood'
}] | filter:{'favorite food': 'Pizza'} }}
③自定义函数进行过滤
◇isCapitalized函数的功能是根据首字母是否为大写返回true或false。
$scope.isCapitalized= function(str) {
return str[0] == str[0].toUpperCase();
使用自定义过滤函数
{{['Ari','likes','to','travel'] | filter:isCapitalized }}
我们也可以给filter过滤器传入第二个参数，用来指定预期值同实际值进行比较的方式。
第二个参数可以是以下三种情况之一。
用angular.equals(expected, actual)对两个值进行严格比较。
进行区分大小写的子字符串比较。
运行这个函数，如果返回真值就接受这个元素。
★JSON过滤器
json过滤器可以将一个JSON或Script对象转换成字符串。这种转换对调试非常有帮助，例如：
{{ {'name':'Ari', 'City': 'SanFrancisco'} | json }}
★limitTo过滤器（截取字符串）
limitTo过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取。
如果传入的长度值大于被操作数组或字符串的长度，那么整个数组或字符串都会被返回。
例如，我们可以截取字符串的前三个字符：
{{ San Francisco is very cloudy | limitTo:3 }}
&!-- San --&
或最后的六个字符：
{{ San Francisco is very cloudy | limitTo:-6 }}
对数组也可以进行同样的操作。返回数组的第一个元素：
{{ ['a','b','c','d','e','f'] | limitTo:1 }}
★orderBy过滤器
orderBy过滤器可以用表达式对指定的数组进行排序。orderBy可以接受两个参数，第一个是必需的，第二个是可选的。第一个参数是用来确定数组排序方向的谓词。
下面分情况讨论第一个参数的类型。
当第一个参数是函数时，该函数会被当作待排序对象的getter方法。
对这个字符串进行解析的结果将决定数组元素的排序方向。可以传入+或-来强制进行升序或降序排列。
在排序表达式中使用数组元素作为谓词。对与表达式结果并不严格相等的每个元素，则使用第一个谓词。
第二个参数用来控制排序的方向（是否逆向）。
'name': 'Ari',
'status': 'awake'
'name': 'Q',
'status': 'sleeping'
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name' }}
{&name&:&Ari&,&status&:&awake&},
{&name&:&Nate&,&status&:&awake&},
{&name&:&Q&,&status&:&sleeping&}
也可以对排序结果进行反转。例如，通过将第二个参数设置为true可以将排序结果进行反转：
'name': 'Ari',
'status': 'awake'
'name': 'Q',
'status': 'sleeping'
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name':true }}
三、自定义过滤器
创建自定义过滤器需要将它放到自己的模块中。
◇实现一个过滤器，将字符串第一个字母转换为大写。
过滤器本质上是一个会把我们输入的内容当作参数传入进去的函数。上面这个例子中，我们在调用过滤器时简单地把input当作字符串来处理。可以在这个函数中做一些错误检查：
angular.module('myApp.filters', []).filter('capitalize', function() {
returnfunction(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
现在，如果想将一个句子的首字母转换成大写形式，可以用过滤器先将整个句子都转换成小
写，再把首字母转换成大写：
{{ 'ginger loves dog treats' | lowercase | capitalize}}angularjs filter 详解 - 为程序员服务
angularjs filter 详解
系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能，angularjs的filter功能可分为二种，一种是内置的过滤器，一种是自定义的。
一，内置的过滤器
1，uppercase，lowercase大小转换
{{ "lower cap string" | uppercase }}
//结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}
//结果：tank is good
｜这里的竖线是一种管道功能，如果对linux比较熟悉的话，这块的｜根linux的管道功能，基本是一样的
2，json格式化
{{ {foo: "bar", baz: 23} | json }}
//结果：{ "foo": "bar", "baz": 23 }
注意：bza没格式前是没有双引号的，格式化后就转换成了json数据了。
3，date格式化
{{ 4 | date }}
//结果：May 3, 2011
{{ 4 | date:"MM/dd/yyyy @ h:mma" }}
//结果：05/03/2011 @ 6:39AM
{{ 4 | date:"yyyy-MM-dd hh:mm:ss" }}
//结果： 06:39:08
4，number格式化
{{ 1.234567 | number:1 }}
//结果：1.2
{{ 1234567 | number }}
//结果：1,234,567
5，currency货币格式化
{{ 250 | currency }}
//结果：$250.00
{{ 250 | currency:"RMB ￥ " }}
//结果：RMB ￥ 250.00
6，filter查找
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}}
//查找含有有s的行
//上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}
//查找name为iphone的行
//上例结果:[{"age":20,"id":10,"name":"iphone"}]
7，limitTo字符串，对像的截取
{{ "i love tank" | limitTo:6 }}
//结果：i love
{{ "i love tank" | limitTo:-4 }}
//结果：tank
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }}
//结果：[{"age":20,"id":10,"name":"iphone"}]
8，orderBy对像排序
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}
//根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
//根据id升序排
二，自定filter功能
我找了一个基本angularjs的mvc框架，phonecat，自定义filter也是在这基础写的，这个框架挺好用的。
1，filters.js添加一个module
angular.module('tanktest', []).filter('tankreplace', function() {
return function(input) {
return input.replace(/tank/, "=====")
2，app.js中加载这个module
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers',
'facebookControllers',
'tanktest'
3，html中调用
{{ "TANK is GOOD" | lowercase |tankreplace}}
//结果：===== is good
注意：| lowercase |tankreplace管道命令可以有多个
系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能，angularjs的filter功能可分为二种，一种是内置的过滤器，一种是自定义的。
一，内置的过滤器
1，uppercase，lowercase大小转换
{{ "lower cap string" | uppercase }}
//结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}
//结果：tank is good
｜这里的竖线是一种管道功能，如果对linux比较熟悉的话，这块的｜根linux的管道功能，基本是一样的
2，json格式化
{{ {foo: "bar", baz: 23} | json }}
//结果：{ "foo": "bar", "baz": 23 }
注意：bza没格式前是没有双引号的，格式化后就转换成了json数据了。
3，date格式化
{{ 4 | date }}
－－一步，二步，三步，N步，二行脚印
原文地址：, 感谢原作者分享。
您可能感兴趣的代码AngularJS中的过滤器filter用法完全解析
作者：hudeyong926
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了AngularJS中的过滤器filter用法,包括Angular中一些常用的自带的过滤器的列举以及自定义filter的方法,需要的朋友可以参考下
在AngularJS的世界里，filter提供了一种格式化数据的方法，Angular也提供给我们了很多内建的过滤器，并且建立自定义过滤器也是相当的简单
在HTML的模板绑定{{}}中，我们使用 | 来调用过滤器，比如，我们想让字符串全部大写字符显示：
{{ name | uppercase }}
当然了，我们也可以在JavaScript中使用$filter服务来调用过滤器，还拿字符串大写来举例：
app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
如何传递参数到filter呢？只需要把参数放在filter之后，中间加个冒号（如果有多个参数要传递，在每个参数后加上冒号）比如，数字过滤器可以帮助我们限制数字的位数，如果想显示两位小数，加上number:2就可以了
{{ 123.456789 | number:2 }}
filter过滤器主要用来过滤一个数组数据并返回一个包含子数组数据的新数组。
比如，在客户端搜索时，我们可以快速的从数组中过滤出我们想要的结果。
这个filter方法接收一个string，object，或者function参数用来选择/移除数组元素。
下满我们具体来看：
一，内置的过滤器
1，uppercase，lowercase大小转换
{{ "lower cap string" | uppercase }}
//结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}
//结果：tank is good
&｜这里的竖线是一种管道功能，如果对linux比较熟悉的话，这块的｜根linux的管道功能，基本是一样的2，json格式化
{{ {foo: "bar", baz: 23} | json }}
//结果：{ "foo": "bar", "baz": 23 }
注意：bza没格式前是没有双引号的，格式化后就转换成了json数据了。
3，date格式化
mysql时间戳 ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"&&
{{ 4 | date:'medium'}}
//May 03, :08 PM
{{ 4 | date }}
//结果：May 3, 2011
{{ 4 | date:"MM/dd/yyyy @ h:mma" }}
//结果：05/03/2011 @ 6:39AM
{{ 4 | date:"yyyy-MM-dd hh:mm:ss" }}
//结果： 06:39:08
&4，number格式化
{{ 1.234567 | number:1 }}
//结果：1.2
{{ 1234567 | number }}
//结果：1,234,567
&5，currency货币格式化
{{ 250 | currency }}
//结果：$250.00
{{ 250 | currency:"RMB ￥ " }}
//结果：RMB ￥ 250.00
&6，filter查找 只能查value,不能查key
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}}
//查找含有有s的行
//上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'ip'} }}
//查找name like ip的行
//上例结果:[{"age":20,"id":10,"name":"iphone"}]
$filter('number')(30000, 2);
var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}])
&7，limitTo字符串，对像的截取
{{ "i love tank" | limitTo:6 }}
//结果：i love
{{ "i love tank" | limitTo:-4 }}
//结果：tank
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }}
//结果：[{"age":20,"id":10,"name":"iphone"}]
&8，orderBy对像排序
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}
//根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
//根据id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:['-age','name'] }}
二，自定filter功能
filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。
app.filter('过滤器名称',function(){
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
//...做一些事情
return 处理后的对象;
我找了一个基本angularjs的mvc框架，phonecat，自定义filter也是在这基础写的，这个框架挺好用的。
filters.js添加一个module
angular.module('tanktest', []).filter('tankreplace', function() {
return function(input) {
return input.replace(/tank/, "=====")
html中调用
{{ "TANK is GOOD" | lowercase |tankreplace}}
//结果：===== is good
&注意：| lowercase |tankreplace管道命令可以有多个
yourApp.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
filtered.sort(function (a, b) {
return (a[field] & b[field] ? 1 : -1);
if(reverse) filtered.reverse();
该过滤器将对象转换成标准的数组并把它通过您指定字段排序。您可以使用orderObjectBy过滤器酷似ORDERBY，包括字段名后一个布尔值，以指定的顺序是否应该得到扭转。换句话说，假的是升序，真正的下降。html调用
&li ng-repeat="item in items | orderObjectBy:'color':true"&{{ item.color }}&/li&
&input type="text" ng-model="search" class="form-control" placeholder="Search"&
&!-- ng-class="{dropup:true}" --&
&th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}"&
&span ng-class="{orderColor: orderType === 'id'}" class="caret"&&/span&
&th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}"&
&span ng-class="{orderColor: orderType === 'name'}" class="caret"&&/span&
&th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}"&
&span ng-class="{orderColor: orderType === 'price'}" class="caret"&&/span&
&tr ng-repeat="item in productData | filter: search | orderBy:order + orderType"&
&td&{{item.id}}&/td&
&td&{{item.name}}&/td&
&td&{{item.price | currency: '￥'}}&/td&
//默认排序字段
$scope.orderType = 'id';
$scope.order = '-';
$scope.changeOrder = function(type) {
console.log(type);
$scope.orderType =
if ($scope.order === '') {
$scope.order = '-';
$scope.order = '';
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。angularjs内置过滤器的使用学习
在angular中内置了几个常用的filter,可以简化我们的操作。
过滤器使用 '|' 符号，概念有点类似于linux中的管道。
1、filter （过滤）
filter可以根据条件过滤数据，例子：
{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | filter:'coolcao'}}
[{"name":"coolcao","age":23}]
这里是过滤含有'coolcao'的对象，不论是哪个属性中含有'coolcao'都可以。
如果要精确过滤，例如只要name为coolcao的可以使用如下：
{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | filter:{'name':'coolcao'} }}
注意：filter 对象使用的大括号和angularjs取值所用的大括号之间要留至少一个空格（就是最后三个大括号倒数第三个和倒数1，2两个大括号之前留至少一个空格，不然angularjs会解析错误）
2、date : 日期格式化
在后台返回的数据中，时间字段，我们可能使用的是时间戳，Long型，在页面显示中肯定格式化为类似于‘ 12:12:12’的字符串，使用date过滤器即可
{{2 | date:'yyyy-MM-dd HH:mm:ss'}}
显示结果：
注意：Long型的时间戳字段是以毫秒为单位的，如果系统后台使用的是以秒为单位的，那么在angular里要乘以1000转换为以毫秒为单位。这里一定要分清到底是秒还是毫秒
3、number : 数字格式化
{{ 3.1415926 | number:1 }}
{{ 3.1415926 | number:2 }}
{{ -3.1415926 | number:2 }}
{{ 3 | number:2 }}
{{ 0.002 | number:2 }}
{{ 0.009 | number:2 }}
{{100 | number}}
{{1000 | number}}
{{1000 | number:2}}
啥也不说了，直接看结果：
4、orderBy
{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age'}}
[{"name":"lily","age":20},{"name":"tom","age":22},{"name":"coolcao","age":23}]
默认是升序排列，如果要倒序：
{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age':true}}
5、json格式化
{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | json}}
[ { "name": "coolcao", "age": 23 }, { "name": "lily", "age": 22 }, { "name": "tom", "age": 22 } ]
注意：输入是js的对象（非标准json），输出的是标准的json字符串（属性名称会用双引号）
6、大小写转换： uppercase,lowercase
{{'abc' | uppercase}}
将输出大写的 ABC
注意：uppercase,lowercase只能对字符串进行过滤转换
7、currency : 货币的格式化
有时候我们需要把数字显示为货币的形式方便展示，可以使用currency进行格式化
{{1000 | currency }}
{{1000 | currency:"RMB ￥" }}显示：
RMB ￥1,000.00