在開發中，經常會遇到這樣的場景：
如使用者的性别分為“男”和“女”，在資料庫中儲存的值為1和0，使用者在檢視自己的性别時後端傳回的值自然是1或0，前端要轉換為“男”或“女”再顯示出來；
如我要換個羽毛球拍，某貓上羽毛球拍的品牌多達數十種，我想單獨檢視YONEX這個品牌的羽毛球拍；
買完羽毛球拍我還想買一桶羽毛球，點選按銷量排序展示商品；
以上三種場景分别對資料進行了轉換／篩選／排序，總而言之就是對資料的格式化，AngularJS的filter就是用來做這個事的。
一.内置過濾器
AngularJS内置了很多過濾器，在HTML模闆的綁定符号{{}}内通過｜來調用過濾器，如字母轉換成大寫：$scope.name='wangmeijian'
{{name | uppercase}} // 輸出 WANGMEIJIAN
數字轉成千分位寫法：$scope.num = 12345678
{{num | number}} // 輸出 12,345,678
日期格式化：$scope.date=new Date()
{{date | date:'yy-MM-dd'}} // 輸出 2015-11-19
數字格式化成貨币：$scope.num=987654321
{{num | currency:'￥'}} // 輸出 ￥987,654,321.00
執行個體如下：
index.html
<html ng-app='app'>
<head>
<title>AngularJS過濾器filter入門</title>
</head>
<body ng-controller='myController'>
<p>{{name}}轉換成大寫：{{name | uppercase}}</p>
<p>12345678數字轉成千分位寫法：{{num | number}}</p>
<p>日期格式化：{{date | date:'yy-MM-dd'}}</p>
<p>{{987654321| currency:'￥'}}</p>
</body>
<script type="text/javascript" src="angular1.2.9.js" ></script>
<script type="text/javascript" src="filter.js" ></script>
</html>
filter.js
var app = angular.module('app',[])
.controller('myController',['$scope', function($scope){
$scope.name = 'abcdefg';
$scope.num = 12345678;
$scope.date = new Date();
}]) 運作效果：
稍微複雜一點的過濾器——‘filter’，可以傳回給定數組的子集，它接收一個參數，這個參數可以是字元串、對象、函數。
字元串：傳回所有包含這個字元串的元素，想要傳回不包含這個字元串的元素則在前面加！
demo：
{{['wang','mei','jian'] | filter:'a'}} // 傳回包含字母a的元素 ['wang','jian']
對象：Angular會将待過濾對象的屬性與這個對象中的同名屬性進行比較，如果屬性值是字元串會判斷是否包含該字元串（注意這裡是包含，并不需要完全相等）
demo：
{{ [
{
name: 'wangmeijian',
sex: 'boy'
},
{
name: 'bokeyuan',
sex: 'sex'
}
] | filter:{
sex: 'bo'
}
}} // 輸出 [{"name":"wangmeijian","sex":"boy"}]
函數：對每個元素都執行該函數，傳回非假值的元素會出現在新的數組中并傳回
demo：
$scope.getNumber = function(n){
return !isNaN(n);
} {{ ['demo',2,3] | filter:getNumber}} // 輸出 [2,3]
二.自定義過濾器
當内置函數不能滿足你的業務需求時，就需要自定義一個過濾器，自定義過濾器傳回一個函數，函數的參數就是HTML模闆中|左側的資料，它會自動傳入過濾器中。
比如需求是将一句話中的每個單詞首字母變成大寫。
index02.html
<html ng-app='app'>
<head>
<title>AngularJS過濾器filter入門</title>
</head>
<body ng-controller='myController'>
<p>{{ str | capitalize}}</p>
<!-- 輸出 Hello, Welcome To Iteye! -->
</body>
<script type="text/javascript" src="angular1.2.9.js" ></script>
<script type="text/javascript" src="index02Filter.js" ></script>
</html>
index02Filter.js
var app = angular.module('app',[])
.controller('myController',['$scope', function($scope){
$scope.str = 'hello, welcome to iteye!'
}])
.filter('capitalize', function(){
return function(str){
var arr = str.split(/\s+/);
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].substr(0,1).toUpperCase() + arr[i].slice(1);
};
return arr.join(" ")
}
}) 運作效果：
需要注意的是，内置過濾器‘filter’的參數是函數時，會對數組的每個元素執行該函數，自定義過濾器是對數組對象執行它return的函數。
三.實際應用
在實際應用中，會存在對金額進行取兩位小數且做千位分隔符的處理，可以将其做成服務在控制器中調用，也可封裝成一個過濾器。如下所示：
index03.html
<html ng-app='app'>
<head>
<title>AngularJS過濾器filter入門</title>
</head>
<body ng-controller='myController'>
<p ng-bind='formatNum'></p>
<p>{{ num | bitSeparatorFilter}}</p>
</body>
<script type="text/javascript" src="angular1.2.9.js" ></script>
<script type="text/javascript" src="index03Filter.js" ></script>
</html>
index03Filter.js
var app = angular.module('app',[])
.factory('floatUtil', function() {
return {
/**
* 将浮點數num轉換為指定位數places的字元串，位數不夠時會四舍五入
* */
toFixed: function (num, places) {
var times = Math.pow(10, places);
var des = num * times + 0.5;
var numStr = (parseInt(des, 10) / times) + '';
var decimalPlaces = this.getDecimalPlaces(numStr); //小數位數
if (decimalPlaces > 0) {
numStr = this.addZero(numStr, places - decimalPlaces);
} else { //整型
numStr = this.addZero(numStr + '.', places);
}
return numStr;
},
/**
* 為字元串結尾添加指定個零
* */
addZero: function (numStr, zeroNum) {
var zeroStr = '';
zeroNum = zeroNum < 0 ? 0 : zeroNum;
for (var i = 0; i < zeroNum; i++) {
zeroStr += '0';
}
return numStr + zeroStr;
},
/**
* 擷取小數的位數
* */
getDecimalPlaces: function (num) {
var numStr = num.toString();
if (numStr.indexOf('.') > -1) {
return numStr.split('.')[1].length;
}
return 0;
}
};
})
.factory('baseUtil', function(floatUtil) {
/**
* 千位分隔符
* */
function bitSeparator(num) {
if (num === 0) {
return '0.00';
}
if (!num) {
return num;
}
var numStr = floatUtil.toFixed(num, 2);
var decimalStr = '';
if (numStr.indexOf('.') != -1) {//有小數位
var numArr = numStr.split('.');
numStr = numArr[0];
decimalStr = '.' + numArr[1];
}
return numStr.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + decimalStr;
}
return {
bitSeparator: bitSeparator
};
})
.controller('myController',['$scope', 'baseUtil', function($scope, baseUtil){
$scope.num = '1352626.32';
$scope.formatNum = baseUtil.bitSeparator($scope.num);
}])
.filter('bitSeparatorFilter', function(baseUtil){
return function(str){
return baseUtil.bitSeparator(str);
};
}) 運作效果：
參考文章：http://www.cnblogs.com/wangmeijian/p/4979452.html