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