AngularJS高亮显示搜索无结果

Question

我正在使用AngularJS高亮搜索 https://codeforgeek.com/2014/12/highlight-search-result-angular-filter/

问题是，如果我搜索关键字，突出显示效果会很完美。但是，只要键入内容中不存在的关键字，它就会隐藏所有内容。参见下面的图片：

突出显示的关键字：

关键字不正确-没有显示内容：

这是我的JS

None

这是我的HTML

var newsApp = angular.module("NewsApp",[]);
newsApp.controller("newsCtrl",function($scope){
$scope.posts = [

    {
    "id"        : "1",
    "title"     : "CMS Newsletter - 2018-01-02",
    "content"   : ""TEST CONTENT - ORIGINAL CONTENT IS CONFIDENTIAL",
    },

];
});

newsApp.filter('unsafe', function($sce) { 
return function(val) { 
    return $sce.trustAsHtml(val);
}; 
}); 

newsApp.filter('highlight', function($sce) {
 return function(text, phrase) {
   if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
     '<span style="background: red;">$1</span>')

 return $sce.trustAsHtml(text)
 }

如果没有找到关键字，有人知道如何实现一个else参数，该关键字什么都不显示，而不是隐藏整个内容？

Answer 1

您可以将第二个格放入ng-if中，例如说ng-if=" $ctrl.search.text.found() === false"。 您将需要在控制器中创建一个函数，如下所示：

let found = () => search.text.match('input.ref', 'words[].ref') ? true : false

因此，这将呈现其他内容，而不是隐藏所有内容。

它太通用了，但希望能有所帮助：）