javascript - 按单词进行过滤而不隐藏它们

Question

我目前有一个代码，允许我按名称和标题过滤 JSON 对象。我有一个包含几个单词的数组，我想制作相同的过滤器，但不隐藏单词，只需根据我的数组标记它们即可。

$scope.arrayFilter=["bad,bill,mikle,awesome,mosa"];

当我启动应用程序时，是否可以默认执行此过滤器？非常感谢。

https://jsfiddle.net/ryvu49jt/

$scope.data = [{
 title: "Bad",
 name: 'bill'
}, {
 title: "Good",
 name: 'Goe'
}, {
 title: "Great",
 name: 'Brad'
}, {
 title: "Cool",
 name: 'yan'
}, {
 title: "Excellent",
 name: 'mikle'
}, {
 title: "Awesome",
 name: 'mosa'
}, {
 title: "Horrible",
 name: 'morteza'
} ]

}).filter('highlight', function($sce) {
 return function(text, phrase) {
   if (phrase) text = text.replace(new RegExp('(' + phrase + ')', 'gi'),
     '<span class="highlighted">$1</span>')

   return $sce.trustAsHtml(text)
 }
})

目前，如果我在文本字段中输入一个单词，它会按 JSON 对象的名称和标题进行过滤。被标记但消失。我只是希望它们被标记，而不是消失。

非常感谢!

Answer 1

问题是因为您还过滤了 <li>只需删除过滤器并连接 item.name就像这个例子。

<div class="container" >
    <input type="text" placeholder="Search" ng-model="search">
    <ul>
        <li ng-repeat="item in data ">
           <span ng-bind-html="item.title +' '+ item.name | highlight:search"></span>
        </li>
     </ul>
 </div>

它只会在 bind-html 上搜索

这是一个工作 plnkr，其中搜索元素 EXAMPLE