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标签。