在AngularJS中突出显示过滤的结果

发布时间：2020-12-17 08:57:54 所属栏目：安全来源：网络整理

导读：我使用ng-repeat和过滤器在angularJS像手机教程，但我想突出显示在页面中的搜索结果。使用基本的jQuery我会简单地解析页面上的键上的输入，但我想做它的角度方式。有任何想法吗？我的代码： input id="search" type="text" placeholder="Recherche DCI" ng

我使用ng-repeat和过滤器在angularJS像手机教程，但我想突出显示在页面中的搜索结果。使用基本的jQuery我会简单地解析页面上的键上的输入，但我想做它的角度方式。有任何想法吗？

我的代码：

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

在那里为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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!