在 Angular 中，我們不應該試圖直接修改 DOM 的內容，當需要更新 DOM 內容的時候，應該修改的其實是我們的數據模型，也就是 $scope 中的數據，Angular 會幫助我們將修改之后的數據展示在頁面中。

但是，在有些情況下，比如我們有一個搜索框，希望將搜索的關鍵字在正文中高亮出來，這時候就會感覺比較吃力了，filter 可以幫助我們處理這種情況。

實際上，很多時候，我們的數據是不能直接輸出到 DOM 中的，典型的比如日期，或者貨幣等等，通常需要將我們內部的數據格式化之后，再輸出到頁面中，在 Angular 中，這個工作就是通過 filter 來實現的。

filter 是 module 級別的服務，定義之后，可以在整個 module 內直接使用，有著極高的復用性。

為了說明問題，先回顧一下的 走進AngularJs(七) 過濾器（filter） 說明一下過濾器，然后詳細說明如何處理搜索關鍵字高亮問題。你可以直接從自定義過濾器部分開始。

1. 過濾器的用法

1. 模板中使用

我們可以直接在{{}}中使用filter，跟在表達式后面用 | 分割，語法如下：

{{ expression | filter }}

也可以多個filter連用，上一個filter的輸出將作為下一個filter的輸入。

{{ expression | filter1 | filter2 | ... }}

filter可以接收參數，參數用 : 進行分隔。

{{ expression | filter:argument1:argument2:... }}

除了對{{}}中的數據進行格式化，我們還可以在指令中使用filter，例如先對數組array進行過濾處理，然后再循環輸出：

<span ng-repeat="a in array | filter ">

2. 在 controller 和 service 中使用

我們的js代碼中也可以使用過濾器，方式就是我們熟悉的依賴注入，例如我要在controller中使用currency過濾器，只需將它注入到該controller中即可。

app.controller('testC',function($scope,currencyFilter){  $scope.num = currencyFilter(123534); }

在模板中使用{{num}}就可以直接輸出 $123,534.00了！在服務中使用filter也是同樣的道理。

此時你可能會有疑惑，如果我要在controller中使用多個filter，難道要一個一個注入嗎，這豈不太費勁了？小兄弟莫著急~ng提供了一個$filter服務可以來調用所需的filter，你只需注入一個$filter就夠了，使用方法如下：

app.controller('testC',function($scope,$filter){  $scope.num = $filter('currency')(123534);　　$scope.date = $filter('date')(new Date()); }

2. 內置的 filter

1. currentcy, 使用currency可以將數字格式化為貨幣，默認是美元符號，你可以自己傳入所需的符號

{{num | currency : '￥'}}

2. date, 原生的js對日期的格式化能力有限，ng提供的date過濾器基本可以滿足一般的格式化要求。

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

3. filter, 注意了，這個過濾器的名字叫 filter，不要搞混了。用來處理一個數組，然后可以過濾出含有某個子串的元素，作為一個子數組來返回。可以是字符串數組，也可以是對象數組。如果是對象數組，可以匹配屬性的值。它接收一個參數，用來定義子串的匹配規則。

$scope.childrenArray = [    {name:'kimi',age:3},    {name:'cindy',age:4},    {name:'anglar',age:4},    {name:'shitou',age:6},    {name:'tiantian',age:5}  ];

自定義的輔助函數。

$scope.func = function(e){return e.age>4;}

使用 filter 過濾器

{{ childrenArray | filter : 'a' }} //匹配屬性值中含有a的{{ childrenArray | filter : 4 }} //匹配屬性值中含有4的{{ childrenArray | filter : {name : 'i'} }} //參數是對象，匹配name屬性中含有i的{{childrenArray | filter : func }} //參數是函數，指定返回age>4的

4. json, 格式化 json 對象。json過濾器可以把一個js對象格式化為json字符串。作用就和我們熟悉的JSON.stringify()一樣。

{{ jsonTest | json}}

5. limitTo, limitTo過濾器用來截取數組或字符串，接收一個參數用來指定截取的長度。只能從數組或字符串的開頭進行截取

{{ childrenArray | limitTo : 2 }} //將會顯示數組中的前兩項

6. lowercase, 轉換為小寫。把數據轉化為全部小寫。

7. uppercase, 轉換為大寫。

8. number, 格式化數字。number過濾器可以為一個數字加上千位分割，像這樣，123,456,789。同時接收一個參數，可以指定小float類型保留幾位小數：

{{ num | number : 2 }}

9. orderBy 排序，orderBy過濾器可以將一個數組中的元素進行排序，接收一個參數來指定排序規則，參數可以是一個字符串，表示以該屬性名稱進行排序。可以是一個函數，定義排序屬性。還可以是一個數組，表示依次按數組中的屬性值進行排序（若按第一項比較的值相等，再按第二項比較），

<div>{{ childrenArray | orderBy : 'age' }}</div>   //按age屬性值進行排序<div>{{ childrenArray | orderBy : orderFunc }}</div>  //按照函數的返回值進行排序<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同，按照name進行排序

3. 自定義 filter

 我們先定義個沒有參數的過濾器。第一個例子來自 Angular 官方的文檔。

我們希望檢查數據是否為真，如果為真的話，顯示為一個 ✓ ，否則的話，顯示為  ✘， 在 Unicode 中，/u2713 -> ✓， /u2718 -> ✘，所以，我們需要做的就是檢查數據是否為真，然后轉化為這兩個特殊字符進行輸出。

app.filter('checkmark', function() { return function(input) {  return input ? '/u2713' : '/u2718'; };});

過濾器還可以有參數，比如內置的過濾器可以格式話貨幣或者日期。

在過濾器后面，使用冒號 (:) 分隔的就是過濾器的參數，在過濾器中，可以獲取這個參數，如果有多個參數，就繼續使用冒號 (:) 進行分隔，所以，過濾器可以有多個參數。

下面實現一個截斷超長字符串的過濾器。

app.filter("truncate", function(){  return function(text, length){    if (text) {      var ellipsis = text.length > length ? "..." : "";      return text.slice(0, length) + ellipsis;    };    return text;      }});

4. 定義高亮 filter

 我們希望搜索的關鍵字在正文中高亮出來，正文就是過濾器的第一個參數，第二個參數就是搜索關鍵字，這樣，我們的過濾器將會有兩個參數了。

高亮的原理很簡單，將需要高亮的內容使用 span 標記隔離出來，再加上一個特殊的 class 進行描述就可以了。

app.filter("highlight", function($sce, $log){  var fn = function(text, search){    $log.info("text: " + text);    $log.info("search: " + search);    if (!search) {      return $sce.trustAsHtml(text);    }    text = encodeURI(text);    search = encodeURI(search);    var regex = new RegExp(search, 'gi')    var result = text.replace(regex, '<span class="highlightedText">$&</span>');    result = decodeURI(result);    $log.info("result: " + result );    return $sce.trustAsHtml(result);  };  return fn;});

$sce, 和 $log 是 angular 提供的兩個服務，其中 $sce 服務需要使用  ngSanitize 模塊。關于這個模塊，可以參考：angular-ngSanitize模塊-$sanitize服務詳解

5. 定義服務對象

我們的頁面可能很復雜，需要在一個控制器中輸入關鍵字，但是，需要在多個控制器中使用這個關鍵字進行過濾，怎么處理呢？使用服務可以解決這個問題。

在 Angular 中，服務就是一個單例對象，我們使用 factory 可以直接定義一個服務對象。

app.factory("notifyService", function(){  var target = {    search:"key"  };  return target;});

在需要使用這個對象的地方，直接注入就可以獲取這個對象了。

6. 定義搜索 Controller

在搜索控制器中，我們希望用戶提供搜索關鍵字。為了方便檢查，我們順便將用戶的輸入展示出來。

    <div ng-controller="tools">      <div>        <input type="text" ng-model="notify.search" value=""/>      </div>      <div>        {{notify.search}}      </div>    </div>

控制器的實現，我們將服務對象直接注入到控制器中，然后綁定到當前的 $scope 上，以便在當前控制器中實現綁定。

app.controller("tools", function($scope, notifyService){  $scope.notify = notifyService;});

現在，我們可以直接輸入搜索關鍵字，這個關鍵字將被保存到服務對象中，可以在當前的 module 中的各個控制器中訪問這個服務對象。

7. 在內容 Controller 中使用 filter

現在，我們已經有了過濾器，也可以直接通過服務對象來獲取搜索關鍵字，現在組合起來就可以使用了。text 中是我們的正文內容。

    <div ng-controller="search">      <div ng-bind-html="text | highlight:notify.search">      </div>    </div>

下面再看看 highlight 和 notify.search 來自何方。

app.controller("search", function($scope, $log, notifyService){  $scope.text = "hello, world. hello, world. hello, world.";  $scope.notify = notifyService;})

為了在當前控制器中使用搜索關鍵字，關鍵是在搜索關鍵字發生變化的時候，還需要自動更新，我們將服務對象綁定到當前的 $scope 中，這是引用的名稱為 notify.

這樣，在復雜頁面中，我們可能存在多個控制器，在每個需要高亮的控制器中，我們只需要注入服務對象，就可以直接獲取到當前的搜索關鍵字，配合使用過濾器，就可以直接實現全局高亮了。

8. 總結

結合過濾器和服務對象，我們實現了在復雜頁面中，對整個頁面中的內容進行關鍵字高亮。以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。