AngularJS 自定義過濾器

先來回顧一下 ng 中的一些概念：

• module ，代碼的組織單元，其它東西都是在定義在具體的模塊中的。
• app ，業(yè)務概念，可能會用到多個模塊。
• service ，僅在數(shù)據(jù)層面實現(xiàn)特定業(yè)務功能的代碼封裝。
• controller ，與 DOM 結構相關聯(lián)的東西，即是一種業(yè)務封裝概念，又體現(xiàn)了項目組織的層級結構。
• filter ，改變輸入數(shù)據(jù)的一種機制。
• directive ，與 DOM 結構相關聯(lián)的，特定功能的封裝形式。

上面的這幾個概念基本上就是 ng 的全部。每一部分都可以自由定義，使用時通過各要素的相互配合來實現(xiàn)我們的業(yè)務需求。

我們從最開始一致打交道的東西基本上都是 controller 層面的東西。在前面，也介紹了 module 和 service 的自定義。剩下的會介紹 filter 和 directive 的定義?；旧线@幾部分的定義形式都是一樣的，原理上是通過 provider 來做注入形式的聲明，在實際操作過程中，又有很多 shortcut 式的聲明方式。

過濾器的自定義是最簡單的，就是一個函數(shù)，接受輸入，然后返回結果。在考慮過濾器時，我覺得很重要的一點： 無狀態(tài) 。

具體來說，過濾器就是一個函數(shù)，函數(shù)的本質(zhì)含義就是確定的輸入一定得到確定的輸出。雖然 filter 是定義在 module 當中的，而且 filter 又是在 controller 的 DOM 范圍內(nèi)使用的，但是，它和具體的 module ， controller ， scope 這些概念都沒有關系（雖然在這里你可以使用 js 的閉包機制玩些花樣），它僅僅是一個函數(shù)，而已。換句話說，它沒有任何上下文關聯(lián)的能力。

過濾器基本的定義方式：

var app = angular.module('Demo', [], angular.noop);
app.filter('map', function(){
  var filter = function(input){
    return input + '...';
  };
  return filter;
});

上面的代碼定義了一個叫做 map 的過濾器。使用時：

<p>示例數(shù)據(jù): {{ a|map }}</p>

過濾器也可以帶參數(shù)，多個參數(shù)之間使用 : 分割，看一個完整的例子：

<div ng-controller="TestCtrl">
<p>示例數(shù)據(jù): {{ a|map:map_value:'>>':'(no)' }}</p>
<p>示例數(shù)據(jù): {{ b|map:map_value:'>>':'(no)' }}</p>
</div>


<script type="text/javascript">

var app = angular.module('Demo', [], angular.noop);
app.controller('TestCtrl', function($scope){
  $scope.map_value = {
    a: '一',
    b: '二',
    c: '三'
  }
  $scope.a = 'a';
});

app.filter('map', function(){
  var filter = function(input, map_value, append, default_value){
    var r = map_value[input];
    if(r === undefined){ return default_value + append }
    else { return r + append }
  };
  return filter;
});

angular.bootstrap(document, ['Demo']);
</script>