Question

我有树视图结构，其中我提供了搜索工具。现在我想提供突出显示搜索词工具。为了获得突出显示的单词功能，我使用了角度的ui-utils，其中有高亮滤镜。但突出显示过滤器仅突出显示单个单词。

就像我的字符串是＆＃34;我是测试一个＆＃34; ，如果我搜索＆＃34; 我＆＃34;然后它会突出它。但现在我要突出显示＆＃34; I Test＆＃34; 此时突出显示停止工作。我想要多个单词高亮功能。

有人遇到过这种情况吗？提前谢谢。

Answer 1

您可以根据Angular UI的突出显示创建自己的filter，将搜索查询拆分为空格。例如，

YOUR_MODULE.filter('hightlightWords', function () {
  return function (text, search) {
    if (text && (search || angular.isNumber(search))) {
      text = text.toString();
      search = search.toString();

      angular.forEach(search.split(/\s+/), function(search_part) {
        text = text.replace(new RegExp(search_part, 'gi'), '<span class="ui-match">$&</span>');
      });
    }
    return text;
  };
});

如果您愿意，也可以将"ui-match"更改为您自己的突出显示课程。

Angular UI-Utils +突出显示过滤器

1 个答案: