利用angularjs自帶的過濾器，我們可以很方便的實現搜尋框過濾的效果，但是怎麼實現類似百度搜索過濾列表中關鍵字變色的效果呢？效果圖如下：
　　
　　如圖，過濾出相同關鍵字的item，並且與關鍵字相同的部分變色強調效果。接下來看看怎麼實現的。
　　
　　頁面上程式碼：　

<input type="text" ng-model="keyword" style="border:solid 1px #E4E5E7;">        
<div style="margin:20px;">
    <div style="padding: 10px;" ng-repeat
 
="d in data | filter:keyword">
        <span ng-bind-html = "d | wordPlace:keyword"></span>
    </div>
</div>

controller裡面的程式碼:

$scope.data=['海鯽','海賊王','海馬蘋果助手下載','海馬玩模擬器','海島奇兵','海搗網','海島排名','海盜vpn'];

一個input輸入框，用ng-model繫結input的值（輸入的關鍵字），利用angularjs自帶的字串過濾器filter過濾列表資料data裡面包含keyword的item。用wordPlace這個自定義的過濾器實現item裡面包含關鍵字部分的顏色的改變。
改filter的程式碼實現:

angular.module('starter.filter', [])
.filter('wordPlace', function ($sce) {
   return function (input, word) { 
     if (!word)
       return input;
     var result = input.replace(word, "<span style='color:#6CA4FF;'>" + word + "</span>");
     return $sce.trustAsHtml(result);
   };
 })
 

過濾器實現起來也很簡單，找到item中的關鍵字部分替換為一個帶樣式的span標籤+關鍵字，這樣就可以了。注意一點，要呼叫angularjs的$sce.trustAsHtml()方法，否則這個過濾器在最終編譯後在頁面上顯示的是直接帶span標籤的字串，不會 解析為html標籤。
一個小小的技巧，大家有需要類似功能，又沒找到其他的解決方案時候，可以參考下哈。