- 多个过滤器可以通过 | 连用,从左向右,上一个过滤成功的结果会继续进行下一次过滤
简单的常用过滤器
- uppercase，lowercase 大小写转换
{{ "lower cap string" | uppercase }} // 结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} // 结果：tank is good - number 格式化（保留小数）
{{149016.1945000 | number:2}} - currency货币格式化
{{ 250 | currency }} // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00 - limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位
date 日期过滤器
yyyy--表示年份；
MM--月份（必须大写）；
dd--日期；
hh--时；
mm--分（必须小写）；
ss--秒；
EEEE--星期；
hh:mm--形式是24小时制；
h:mma--12小时制；
<li>日期1</li>
<li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss EEEE'"></li>
<li>日期2</li>
<li ng-bind="date|date:'yyyy年MM月dd日 h:mma EEEE'"></li>
<li>日期3</li>
<li ng-bind="date|date:'yyyy年MM月dd日 hh时mm分ss秒'"></li>
<li>日期4</li>
<li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss'"></li>
日期1的显示效果：
2016/11/19 11:59:05 Saturday
日期2的显示效果：
2016年11月19日 12:01PM Saturday
日期3的显示效果：
2016年11月22日 10时42分09秒
日期4的显示效果：
2016/11/22 11:16:58
orderBy 用于数组排序
参数可以有三种类型:
- function函数,会遍历待排序的数组，并将返回的结果进行比较排序。
- 字符串，待排序的数组内容应为对象，按每个对象的对应属性值进行排序。如果字符串前边加有“+”，“-”符号，那么+表示升序排序，-表示降序排序。如果字符串为空，那么将按照元素自身进行排序。
- 数组,那么是第二种情况的一种多属性排序方式 。比如参数为[a,b],那么将先按照a属性值进行排序，如果a属性值相同，那么将按照b属性值进行排序。
定义function 为：
$scope.sortSimpleType(op){
return op;
}
在页面中的代码为：字符串数组排序
<div>
{{['test','bob','market','type','barrow'] | orderBy: sortSimpleType}}
</div>
排序结果为：
["barrow","bob","market","test","type"]
数字数组排序:
<div>
{{[1,3434,2,1,12121,6,56,3] | orderBy: sortSimpleType}}
</div>
排序结果为：
[1,1,2,3,6,56,3434,12121]
当然了，参数类型为function的orderBy过滤器，也可以用来对元素为对象的数组进行排序。只要在函数中返回对象的属性值即可。
定义字符串/数组:
<div>
{{ng-repeat="x in [{'name':'nick','age':34},{'name':'nick','age':23},{'name':'bob','age':23}] | orderBy:[ 'name','age']}}
</div>
//排序结果为：
{"name":"bob","age":23}
{"name":"nick","age":23}
{"name":"nick","age":34}
filter 过滤数组并返回一个子数组
参数可以有三种类型:
- 字符串或数字,返回含有该字符串或数字的成员组成子数组。
<li>{{ webArr | filter : 'n' }}</li>
===>
[{"name":"nick","age":25}]
- 对象,数组成员应为对象;例如
<li>{{ webArr | filter : {name : 'l'} }}</li>
===>
[{"name":"ljy","age":28},{"name":"xzl","age":28}]
- 函数,遍历数组并返回符合该函数的成员组成子数组
<li>{{ webArr | filter : fun }}</li>
$scope.fun = function(e){return e.age>25;};
===>
[{"name":"ljy","age":28},{"name":"xzl","age":28},{"name":"zyh","age":30}]
此外可以自定义过滤器,但没有必要
- 自定义的过滤器可以都添加到一个module上,然后将该module注入到每个项目的module中
<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse : 10 }} //冒号后的值作为参数传给function中的param1
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text,param1) {//此处的形参即为过滤的目标(Runoob)
return text.split("").reverse().join("") + param1;
}
});
</script>
