技術分享：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filter-learn-1/
以下介紹為自己在使用angular-filter時，簡單總結的用法。
開始
1.你可以使用4中不同的方法來安裝angular-filter：
- 克隆或創建這個存儲庫
- 通過bower：通過在你的終端執行：$ bower install angular-filter
- 通過npm：通過在你的終端執行：$ npm install angular-filter
- 通過cdnjs： http://www.cdnjs.com/libraries/angular-filter
2.在包含或Angular本身外，在引用angular-filter.js（或者angular-filter.min.js）在你的項目index.html中；
3.添加‘angular.filter’依賴項；
當你做完這些，你的文件看起來就類似以下：
<!doctype html> <html ng-app="myApp"> <head> </head> <body> ... <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script> <script src="bower_components/angular-filter/dist/angular-filter.min.js"></script> ... <script> var myApp = angular.module('myApp', ['angular.filter']); </script> ... </body> </html>
filter
從數組中選取一個子集，並將其返回成一個新的數組；
用法：
// html中：{{ collection | filter : expression : comparator}} // js中：$filter('filter')(array, expression, comparator) 參數：array：想篩選的數組 expression：用於從數組中篩選的條件 comparator：用於確定預期值（從篩選器表達式）和實際值（從數組中的對象）中使用的比較器，應視為匹配。 $scope.friends = [ {name:'John', phone:'555-1276'}, {name:'Mary', phone:'800-BIG-MARY'}, {name:'Mike', phone:'555-4321'} ] <tr ng-repeat="friendObj in friends | filter:{name:'John'}"> <td>{{friendObj.name}}</td> <td>{{friendObj.phone}}</td> </tr> <--result John 555-1276 -->
Date
https://docs.angularjs.org/api/ng/filter/date
將日期篩選為想要的日期格式；
用法：
// html中：{{ collection | date : format : timezone}} // js中：$filter('date')(date, format, timezone) 參數：format為設置的日期格式，例如：'yyyy-MM-dd' timezone被用於格式化時區。 <span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span> <--result： 2010-10-29 11:40:23 +0800 -->
Collection
concat
將另外一個對象或者數組拼接到已有的對象或者數組之后；
function MainController ($scope) { $scope.array = [ {a: 1}, {a: 2} ]; $scope.object = { 0: {a: 3}, 1: {a: 4} }; } <li ng-repeat="elm in array | concat:object"> {{ elm.a }} </li> <!-- result: 1 2 3 4 -->
unique
從數組或者對象中移除重復項；
如果提供的是一個字符串，它將用提供的表達式來過濾掉重復使用的。
用法：
//html中：{{collection | unique: 'property'}}； //js中：$filter('unique')(collection, 'property')； 參數：collection被篩選的數組或者對象 property去掉這個屬性中的重復值 function MainController ($scope) { $scope.orders = [ { id:1, customer: { name: 'John', id: 10 } }, { id:2, customer: { name: 'William', id: 20 } }, { id:3, customer: { name: 'John', id: 10 } }, { id:4, customer: { name: 'William', id: 20 } }, { id:5, customer: { name: 'Clive', id: 30 } } ]; } <tr ng-repeat="order in orders | unique: 'customer.id'" > <td> {{ order.customer.name }} , {{ order.customer.id }} </td> </tr> <!-- result: All customers list: John 10 William 20 Clive 30 -->
join
將一個數組轉換為一個字符串；
默認情況下，它將加入元素與一個單一的空間，但是你可以提供自己的分隔符。
用法：
//html中：{{collection | join: ','}}； //js中：collection.join(',')； 參數：collection 需要轉換的數組，得到用，連接的字符串 $scope.names = ['John', 'Sebastian', 'Will', 'James']; <p>{{ names | join:',' }}</p> <!--result: John, Sebastian, Will, James --> ps:js中的split()函數可以使用一個字符串中的某一分隔符將其字符串分隔成為數組。
Math
number
用來精確浮點數；
用法：
//html中：{{ number_expression | number : fractionSize}} //js中：$filter('number')(number, fractionSize) 參數：number為待精確的數字 fractionSize（可選）為小數點后精確位數，默認值是3 function MainController ($scope) { $scope.val=1234.56789; } <li>{{val | number:2}}</li> <li>{{val | number}}</li> <-- result: 1234.56 1234.567 -->
如果input類型為number，則需要設置：<input type="number" string-to-number/>
定義stringToNumber：
.directive('stringToNumber', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
ngModel.$parsers.push(function (value) {
return '' + value;
});
ngModel.$formatters.push(function (value) {
return parseFloat(value, 10);
});
}
};
})
max/min
用來查找並返回數組中的最大值(最小值)；
用法：
html中：{{array|max:optional}}
js中：$filter('max')(array,'optional')
<p> {{ [1,2,3,4,7,8,9] | max }}</p>
<--result
9
-->
sum
計算數組中的值；
用法：
html中：{{array|sum:optional}}
js中：$filter('sum')(array,'optional')
{{[1,2,3] | sum:10}}
<--result
16
-->
GitHub英文文檔：https://github.com/a8m/angular-filter