AngularJS 過濾器
過濾器可以使用一個管道字符（|）添加到表達式和指令中。
| 過濾器 | 描述 |
|---|---|
| currency | 格式化數字爲貨幣格式。 |
| filter | 從數組項中選擇一個子集。 |
| lowercase | 格式化字符串爲小寫。 |
| orderBy | 根據某個表達式排列數組。 |
| uppercase | 格式化字符串爲大寫。 |
AngularJS 過濾器可用於轉換數據，以上過濾器是angularjs自帶的，通常不能滿足我們的特殊需要，因此，通常還需要懂得自定義過濾器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularjs 自定義過濾器</title>
</head>
<body ng-app="app">
<div ng-controller="ctr">
<h1>水果價格表</h1>
<div>
價格範圍：
<input type="number" ng-model="min">--
<input type="number" ng-model="max">
</div>
<ul>
<!--自定義過濾器myfilter在html中調用時不需要傳第一個參數，後面2個參數用“：”拼接，可以是字符串、數值或者變量-->
<li ng-repeat="item in fruits | myfilter:min:max">
名稱：<span ng-bind="item.name"></span>
價格：<span ng-bind="item.price"></span>
</li>
</ul>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module('app', [])
.filter('myfilter', function () {
return function (fruits, min, max) {
//fruits 爲第一個參數，即待過濾的數組
//min,max爲其他參數可有可無
var arr = [];
min = min > 0 ? min : 0;
max = max ? max : 99999999;
angular.forEach(fruits, function (item) {
if (item.price > min && item.price <= max) {
arr.push(item);
}
});
return arr;
}
})
.controller('ctr', ['$scope', '$filter', function ($scope, $filter) {
$scope.fruits = [
{name: 'apple', price: 5.2},
{name: 'banana', price: 3.5},
{name: 'mango', price: 12},
{name: 'watermelon', price: 2.5},
{name: 'peach', price: 4},
{name: 'grape', price: 15},
{name: 'litchi', price: 20},
{name: 'orange', price: 6}
];
//自定義過濾器myfilter在js中使用時，案例如下:
//第一個參數是待過濾數據，第2，3個數據是根據定義要求傳入的數據，用逗號分割
$scope.res = $filter('myfilter')($scope.fruits, 10, 20);
console.log($scope.res);
}])
</script>
</body>
</html>
