# 17. 自定義過濾器 先來回顧一下 ng 中的一些概念： - _module_ ，代碼的組織單元，其它東西都是在定義在具體的模塊中的。 - _app_ ，業務概念，可能會用到多個模塊。 - _service_ ，僅在數據層面實現特定業務功能的代碼封裝。 - _controller_ ，與 DOM 結構相關聯的東西，即是一種業務封裝概念，又體現了項目組織的層級結構。 - _filter_ ，改變輸入數據的一種機制。 - _directive_ ，與 DOM 結構相關聯的，特定功能的封裝形式。 上面的這幾個概念基本上就是 ng 的全部。每一部分都可以自由定義，使用時通過各要素的相互配合來實現我們的業務需求。 我們從最開始一致打交道的東西基本上都是 _controller_ 層面的東西。在前面，也介紹了 _module_ 和 _service_ 的自定義。剩下的會介紹 _filter_ 和 _directive_ 的定義。基本上這幾部分的定義形式都是一樣的，原理上是通過 `provider` 來做注入形式的聲明，在實際操作過程中，又有很多 shortcut 式的聲明方式。 過濾器的自定義是最簡單的，就是一個函數，接受輸入，然后返回結果。在考慮過濾器時，我覺得很重要的一點： **無狀態** 。 具體來說，過濾器就是一個函數，函數的本質含義就是確定的輸入一定得到確定的輸出。雖然 _filter_ 是定義在 _module_ 當中的，而且 _filter_ 又是在 _controller_ 的 DOM 范圍內使用的，但是，它和具體的 _module_ ， _controller_ ， _scope_ 這些概念都沒有關系（雖然在這里你可以使用 js 的閉包機制玩些花樣），它僅僅是一個函數，而已。換句話說，它沒有任何上下文關聯的能力。 過濾器基本的定義方式： var app = angular.module('Demo', [], angular.noop); app.filter('map', function(){ var filter = function(input){ return input + '...'; }; return filter; }); 上面的代碼定義了一個叫做 `map` 的過濾器。使用時： <p>示例數據: {{ a|map }}</p> 過濾器也可以帶參數，多個參數之間使用 `:` 分割，看一個完整的例子： 1 <div ng-controller="TestCtrl"> 2 <p>示例數據: {{ a|map:map_value:'>>':'(no)' }}</p> 3 <p>示例數據: {{ b|map:map_value:'>>':'(no)' }}</p> 4 </div> 5 6 7 <script type="text/javascript"> 8 9 var app = angular.module('Demo', [], angular.noop); 10 app.controller('TestCtrl', function($scope){ 11 $scope.map_value = { 12 a: '一', 13 b: '二', 14 c: '三' 15 } 16 $scope.a = 'a'; 17 }); 1819 app.filter('map', function(){ 20 var filter = function(input, map_value, append, default_value){ 21 var r = map_value[input]; 22 if(r === undefined){ return default_value + append } 23 else { return r + append } 24 }; 25 return filter; 26 }); 2728 angular.bootstrap(document, ['Demo']); 29 </script>