1

I currently have a code that allows me to filter a JSON object by both the name and the title. I have an array with a few words, I would like to make this same filter but without hiding the words, just mark them based on my array.

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

Is it possible to perform this filter by default when I start my application ?. Thank you very much.

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)
 }
})

Currently if I type a word in a text field, it is filtered by both the name and the title of my JSON object. Are marked but disappear. I just want them to be marked, not disappear.

thanks a lot!

yavg
  • 2,123
  • 2
  • 25
  • 65
  • Use `ng-options` and `ng-init`. Check this. https://stackoverflow.com/questions/34646716/set-default-option-from-angular-filter – abhig10 Aug 25 '17 at 06:51

2 Answers2

0

The problem is because you also filtering the <li> just delete the filter and also concatenate the the item.name like this example.

<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>

it would search only on the bind-html

Here is a working plnkr where search over the elements EXAMPLE

Jesus Carrasco
  • 1,356
  • 1
  • 8
  • 15
  • great! But as I said in the question, I need to make the filter not by the text field, but with the values present in the array.$scope.arrayFilter=["bad,bill,mikle,awesome,mosa"]; I am sure that if you help me, I will understand much more angular. – yavg Aug 25 '17 at 03:15
0

just remove the filter from your ng-repeat and leave the other code same as it is

 <li ng-repeat="item in data">
CIPHER007
  • 366
  • 3
  • 12