正文

ionic,angularJs实现搜索框过滤关键字

IP云
IP云V管理员/4 阅读
07/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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