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

Answer 2

只需从ng-repeat中移除过滤器，然后将其他代码保留为原样

 <li ng-repeat="item in data">

通过单词进行过滤而不隐藏它们

2 个答案: