filter过滤器是angular中一个很实用的工具，通过它我们可以很简单的对我们的数据进行格式化，看例子：
表达式中添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.
(（下面的两个实例，我们将使用前面章节中提到的 person 控制器）)
uppercase 过滤器将字符串格式化为大写：
AngularJS 实例
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
尝试一下 » lowercase 过滤器将字符串格式化为小写：
AngularJS 实例
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | lowercase }}</p>
</div>
尝试一下 »
--------------------------------------------------------------------------------
currency 过滤器
currency 过滤器将数字格式化为货币格式：
AngularJS 实例
<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
尝试一下 »
--------------------------------------------------------------------------------
向指令添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
orderBy 过滤器根据表达式排列数组：
AngularJS 实例
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
尝试一下 »
--------------------------------------------------------------------------------
过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：
AngularJS 实例
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/angular.js/1.4.4/angular.js"></script>
<script>
angular.module('demo',[])
.filter('spillOver',function(){
return function(item,len){
var len = len||5;
item = item.toString();
if(item.length>len){
return item.substr(0,len) + '……';
}
return item;
}
})
</script>
</head>
<body ng-app='demo'>
<p>{{1440838384000 | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<p>{{'每日每夜' | spillOver:'3'}}</p>
<p>{{'没有人还在这里'|spillOver:'6'}}</p>
<p>{{'没有人还在这里'|spillOver}}</p>
</body>
</html>
运行效果如下：
演示中的date是angular的内置filter，spillOver是我自定义的filter，具体的代码可以参见js部分，还是很灵活的，默认的第一个参数就是管道符号“|”左边的字符串，而后面的参数可以通过自定义filter:传入。
补充
AngularJS的内置过滤器
先来看看这些内置过滤器使用方法:
一个过滤器，不带参数的情况
{{expression | filter}}
一个过滤器，带参数的情况
{{expression | filter:arguments}}
一个过滤器，带多个参数的情况
{{expression | filter: arg1: arg2: ...}}
多个过滤器，不带参数的情况
{{expression | filter1 | filter2 | ...}}
下面我们分别使用以下AngularJS的内置过滤器
currency
currency允许我们设置自己的货币符号，默认情况下会采用客户端所处区域的货币符号。
可以这样使用：{{ 3600 | currency: "$￥"}}
返回结果为$￥123.00
number
number过滤器将数字格式化成文本，它的参数是可选的，用来控制小数点后的截取位数
如果传入的是一个非数字字符，会返回空字符串
可以这样使用：{{ 3600 | number:2}}
返回结果为：3,600.00
lowercase
lowercase将字符串转换为小写
可以这样使用：{{ "HEllo" | lowercase}}
返回结果为：hello
uppercase
uppercase将字符串转换为大写
可以这样使用：{{ "HEllo" | uppercase}}
返回结果为：HELLO
json
json过滤器可以将一个JSON或者JavaScript对象转换成字符串。
这个过滤器对调试相当有用
可以这样使用：{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回结果为：{ "name": "dreamapple", "language": "AngularJS" }
date
date过滤器将日期过滤成你想要的格式，这个实在是很好的过滤器。
这个过滤器用法很多我这里列举几种常用的
{{ today | date: "yyyy - mm - dd"}}
结果为：2015 - 15 - 13
{{ today | date: "yyyy - mm - dd HH:mm::ss"}}
结果为：2015 - 18 - 13 20:18::38
[online code](2015 - 18 - 13 20:18::38)
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索字符串
， 实例
， 参数
， 表达式
， 过滤器
格式
angularjs filter使用、filter过滤器的使用、angularjs的使用方法、angularjs filter、angularjs 过滤器，以便于您获取更多的相关知识。