当前位置: 首页 > 面试题库 >

在AngularJS中突出显示过滤结果

温浩大
2023-03-14
问题内容

我像电话教程一样在angularJS中使用ng-
repeat和filter,但我想在页面中突出显示搜索结果。使用基本的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;
}


 类似资料:
  • 问题内容: 如何突出显示使用php的mysql查询的搜索结果? 这是我的 [修改] 代码: 问题答案: 您可以使用preg_replace();,当它在文本中找到匹配项时,您可以在匹配词周围放置一个带有突出显示类别的div。然后,您可以向突出显示类添加背景颜色和边框,以使其突出显示 preg_replace期望3个参数; 第一个是您要寻找的 第二个是应该更改为 他应从中搜索并替换的文本字符串 例如

  • 有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。例如: <li v-for="n in evenNumbers">{{ n }}</li> data: { numbers: [ 1, 2, 3, 4, 5 ] }, computed: { evenNumbers: function () { retu

  • 本文向大家介绍HTML 突出显示,包括了HTML 突出显示的使用技巧和注意事项,需要的朋友参考一下 示例 该<mark>元素是HTML5中的新元素,用于“由于其在另一个上下文中的相关性”而标记或突出显示文档中的文本。1 最常见的示例是用户输入搜索查询并显示结果以突出显示所需查询的搜索结果。 输出: 常见的标准格式是黄色背景上的黑色文本,但是可以使用CSS进行更改。

  • 我在IntelliJ IDEA2020.1.2(终极版)中打开一个spring boot项目,并在实体中打开许多错误突出显示,例如: 无法解析表“角色” 类“RolesEntity”应具有[public,protected]无arg构造函数 无法解析表“user_roles” 但是当我在IntelliJ IDEA2019.3.3(社区版)这样的旧版本中打开我的项目时,我就看不出这个问题了。 Int

  • 问题内容: 我希望突出显示匹配的结果。如果我提到字段名称,它对我有用,它返回突出显示的文本,但是,如果我将字段指定为“ _all”,则它不返回任何值。这对我有用: 这将返回预期值,如下所示:[突出显示] => stdClass对象([my_field] =>数组([0] => stackoverflow 是最适合技术人员的网站)) 但是当我给这个: 我得到空值/无结果。 如何使它在任何字段上都能使

  • 问题内容: 我想使用jQuery / Java脚本搜索并突出显示文本。 示例HTML 1: 当我搜索字符串“ Good Morning”时,div1和div3中的内容都应突出显示。即。输出html应该是 我使用了插件https://raw.github.com/bartaz/sandbox.js/master/jquery.highlight.js将搜索到的内容包含在span中。但是只有div3高