angularjs: filtr i śmiały część wyniku

Question

Mam listę filtrowane tak:

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

oraz wejście wyszukiwania

ng-model="search.name" 

To działa, ale chciałbym, aby część zapytań w wyniki pogrubione.

przykład:

query = zza 

wyniki:

• Li * ZZA *
• pi * ZZA *
• ABC * ZZA * def

Answer 1

Można zrobić swój własny filtr, który zmienia wejście w oparciu o ciąg frazy:

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

To działa, ale filtr zwraca HTML, więc trzeba będzie powiedzieć kątowe traktować wynik jako html . Aby to zrobić, musisz dołączyć ngSanitize jako zależność od modułu i wstawić wynik z ng-bind-html.
Oto pełna demo:

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

A kątowa część:

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

Oto demo on-line: http://jsfiddle.net/gion_13/ZDWdH/2/.

Answer 2

Dwie wskazówki dotyczące odpowiedzi od gion_13.

Jeżeli zapytanie jest pusty łańcuch (po filtracji i usunięciu szukany), a następnie wejście „oczko” jest modyfikowany w następujący sposób: jabłkowy

Rozwiązaniem tego problemu jest zmiana albo wyrażenia regularnego lub wczesne zwrot:

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

Jeśli nie chcesz filtr poufne sprawy niż zmienić RegExp:

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