ionic,angularJs實現搜索框過濾關鍵字

利用AngularJS自帶的過濾器，我們可以很方便的實現搜索框過濾的效果，但是怎么實現類似百度搜索過濾列表中關鍵字變色的效果呢？

頁面上代碼：

<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>

控制器代碼：

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標簽。