在 AngularJS 中突出显示过滤结果 [英] Highlighting a filtered result in AngularJS

问题描述

我在 angularJS 中使用 ng-repeat 和过滤器，就像手机教程一样，但我想突出显示页面中的搜索结果.使用基本的 jQuery，我会简单地在输入上解析页面上的键，但我正在尝试以有角度的方式进行.有什么想法吗?

I'm using a ng-repeat and filter in angularJS like the phones tutorial but I'd like to highlight the search results in the page. With basic jQuery I would have simply parsed the page on key up on the input, but I'm trying to do it the angular way. Any ideas ?

我的代码:

<input id="search" type="text" placeholder="Recherche DCI" ng-model="search_query" autofocus>
<tr ng-repeat="dci in dcis | filter:search_query">
            <td class='marque'>{{dci.marque}} ®</td>
            <td class="dci">{{dci.dci}}</td>
 </tr>

推荐答案

In did that for AngularJS v1.2+

In did that for AngularJS v1.2+

HTML:

<span ng-bind-html="highlight(textToSearchThrough, searchText)"></span>

JS:

$scope.highlight = function(text, search) {
    if (!search) {
        return $sce.trustAsHtml(text);
    }
    return $sce.trustAsHtml(text.replace(new RegExp(search, 'gi'), '<span class="highlightedText">$&</span>'));
};

CSS:

.highlightedText {
    background: yellow;
}

这篇关于在 AngularJS 中突出显示过滤结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！