AngularJS: filtro e parte in grassetto del risultato

Question

Ho un elenco filtrato come questo:

ng-repeat="item in items | filter:query | limitTo:10" 

e un ingresso di ricerca

ng-model="search.name" 

funziona, ma vorrei fare la parte query in i risultati in grassetto.

Esempio:

query = zza 

risultati:

• Li * zza *
• Pi * zza *
• Abc * zza * def

Answer 1

È possibile rendere il proprio filtro personalizzato che altera l'ingresso in base alla stringa di ricerca:

angular.module('app').filter('searchfilter', function() { 
    return function (input, query) { 
     var r = RegExp('('+ query + ')', 'g'); 
     return input.replace(r, '<span class="super-class">$1</span>'); 
    } 
}); 

questo funziona, ma il filtro restituisce html, quindi sarà necessario dire a angolare per trattare il risultato come html . Per fare ciò, è necessario includere ngSanitize come dipendenza del modulo e inserire il risultato con ng-bind-html.
Ecco una demo completa:

<div ng-app="app"> 
    <div ng-controller="Ctrl"> 
     <input ng-model="search" placeholder="search a fruit" /> 
     <ul> 
      <li ng-repeat="fruit in fruits| filter:search | limitTo:10" ng-bind-html="fruit | searchfilter:search" ></li> 
     </ul> 
    </div> 
</div> 

E la parte angolare:

angular 
    .module('app', ['ngSanitize']) 
    .controller('Ctrl', function($scope){ 
     $scope.fruits = 'apple orange banana pineaple grape plumb strawberry lemon lime'.split(' '); 
    }) 
    .filter('searchfilter', function() { 
     return function (input, query) { 
      return input.replace(RegExp('('+ query + ')', 'g'), '<span class="super-class">$1</span>');   
     } 
    }); 

Ecco la demo online: http://jsfiddle.net/gion_13/ZDWdH/2/.

Answer 2

Due suggerimenti per la risposta di gion_13.

Se la query è una stringa vuota (dopo filtrazione ed eliminando il termine di ricerca), allora l'ingresso "mela" viene modificato così: mela

La soluzione per questo è di cambiare sia la regex o un rientro anticipato:

.filter('searchfilter', function() { 
    return function (input, query) { 
     if (query === '') { 
      return input; 
     } 
     return input.replace(RegExp('('+ query + ')', 'g'), '<span class="super- class">$1</span>');   
    }  
}); 

Se non si desidera un filtro sensibile caso di cambiare il RegExp:

RegExp('('+ query + ')', 'gi'), '<span class="super- class">$1</span>');