在開發中，經常會遇到這樣的場景
如用戶的性別分為“男”和“女”，在數據庫中保存的值為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
稍微復雜一點的過濾器——‘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模板中|左側的數據，它會自動傳入過濾器中
比如需求是將一句話中的每個單詞首字母變成大寫
<html ng-app='app'>
<head>
<title>AngularJS過濾器filter入門</title>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.5.0-beta.1/angular.js"></script>
</head>
<body ng-controller='myController'>
<p>{{ str | capitalize}}</p>
<!-- 輸出 Hello, Welcome To Bokeyuan! -->
<script type="text/javascript">
var app = angular.module('app',[])
.controller('myController',['$scope', function($scope){
$scope.str = 'hello, welcome to bokeyuan!'
}])
.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(" ")
}
})
</script>
</body>
</html>
需要注意的是，內置過濾器‘filter’的參數是函數時，會對數組的每個元素執行該函數，自定義過濾器是對數組對象執行它return的函數。
作者：古德God
出處：http://www.cnblogs.com/wangmeijian
本文版權歸作者和博客園所有，歡迎轉載，轉載請標明出處。
如果您覺得本篇博文對您有所收獲，請點擊右下角的 [推薦]，謝謝！