标签：angular 过滤器 currency number filter
AngularJS中的过滤器是用于对数据的格式化，或者筛选的函数，可以直接通过以下语法使用：
{{expression|filter}}
{{expression|filter1|filter2}}
{{expression|filter1:param1,param2,...|filter2}
过滤器的种类有number，currency，date，json，limitTo，lowercase，uppercase，filter，orderBy。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
</head>
<body ng-app="app">
<div ng-controller="Controller1">
<p>{{1234567890 | number}}</p>
<!--显示1,234,567,890-->
<p>{{1234.56789 | number:3}}</p>
<!--显示1,234.568，保留3位小数-->
<p>{{1234.56789 | currency}}</p>
<!--显示$1,234.57，货币，默认的前缀是美元符号-->
<p>{{1234.56789 | currency:‘￥‘}}</p>
<!--显示￥1,234.57-->
<p>{{today | date:‘medium‘}}</p>
<!--显示Jun 28, 2015 3:45:54 PM-->
<p>{{today | date:‘short‘}}</p>
<!--显示6/28/15 3:45 PM-->
<p>{{today | date:‘fullDate‘}}</p>
<!--显示Sunday, June 28, 2015-->
<p>{{today | date:‘longDate‘}}</p>
<!--显示June 28, 2015-->
<p>{{today | date:‘shortDate‘}}</p>
<!--显示6/28/15-->
<p>{{today | date:‘shortTime‘}}</p>
<!--显示3:45 PM-->
<p>{{today | date:‘mediumTime‘}}</p>
<!--显示3:45:54 PM-->
<p>{{today | date:‘yyyy-MM-dd HH:mm:ss‘}}</p>
<!--显示2015-06-28 15:45:54-->
<p>{{[‘a‘,‘b‘,‘c‘,‘d‘,‘e‘] | limitTo:3}}</p>
<!--显示["a","b","c"]，截取前3位-->
<p>{{[‘a‘,‘b‘,‘c‘,‘d‘,‘e‘] | limitTo:-3}}</p>
<!--显示["c","d","e"]，截取后3位-->
<p>{{‘Hello World‘ | lowercase}}</p>
<!--显示hello world-->
<p>{{‘Hello World‘ | uppercase}}</p>
<!--显示HELLO WORLD-->
<p>{{data.phone | filter:‘le‘}}</p>
<!--显示[{"name":"iPhone","company":"Apple"}]，只匹配value值-->
<p>{{data.phone | filter:{company:‘A‘} }}</p>
<!--显示[{"name":"iPhone","company":"Apple"},{"name":"HUAWEI P8","company":"HUAWEI"}]，company中有A就会匹配到-->
<p>{{data.phone | orderBy:‘name‘}}</p>
<!--显示[{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"},{"name":"iPhone","company":"Apple"}]，以name的值做排序，默认是从小到大排序-->
<p>{{data.phone | orderBy:-‘name‘}}</p>
<!--显示[{"name":"iPhone","company":"Apple"},{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"}]，反序-->
<p>{{[2,24,13,89,3,8,41,9,10] | filter:checkNum}}</p>
<!--自定义的过滤器，显示[2,3,8,9,10]，定义见90~95行-->
</div>
<script src="../JS/angular.min.js"></script>
<script type="text/javascript">
angular.module(‘app‘, [])
.controller(‘Controller1‘, function($scope, $filter) {
$scope.today = new Date;
$scope.data = {
phone: [{
name: ‘iPhone‘,
company: ‘Apple‘
}, {
name: ‘Galaxy S5‘,
company: ‘Sumsung‘
}, {
name: ‘HUAWEI P8‘,
company: ‘HUAWEI‘
}]
};
var jsonString = $filter(‘json‘)($scope.data);
console.log(jsonString);
/* console输出json格式的data
{
"phone": [
{
"name": "iPhone",
"company": "Apple"
},
{
"name": "Galaxy S5",
"company": "Sumsung"
},
{
"name": "HUAWEI P8",
"company": "HUAWEI"
}
]
}
*/
//自定义过滤器
$scope.checkNum = function(num) {
//>10的不保留
if (num > 10) return false;
else return true;
}
});
</script>
</body>
</html>标签：angular 过滤器 currency number filter
原文地址：http://iampomelo.blog.51cto.com/10193513/1668754
