Смелые совпадающие символы в AngularJS View

Question

Когда я выполняю поиск в своем приложении, я хочу обернуть соответствующие символы в результатах жирным тегом, чтобы вы могли видеть совпадения.

Таким образом, вид результатов выглядит следующим образом:

<ul class="search-results ng-hide" ng-show="(results | filter: filterQuery).length > 0"> 
    <li ng-repeat="result in results | filter:filterQuery"> 
     <h3><a ui-sref="{{result.state}}">{{result.name}}</a></h3> 
     <p>{{result.snippet}}</p> 
    </li> 
</ul> 

и контроллер:

myApp.controller('SearchCtrl', function($rootScope, $scope, $state, Result, $location, $filter) { 

    $scope.query = ($state.includes('search') ? $location.search()['q'] : ''); 
    $scope.filterQuery = ($state.includes('search') ? $location.search()['q'] : ''); 

    $scope.results = []; 

    $scope.queryChanged = function() { 
     $scope.filterQuery = $scope.query; 
     if($scope.query){ 
      $state.go('search', {'q': $scope.query}); 
     } else { 
      $location.search('q', null); 
     } 
    } 

    if($scope.query){ 
     $scope.results = Result.query(); 
    } else { 
     $location.search('q', null); 
    } 

}); 

Так что мне нужно, чтобы обернуть вокруг метки result.name и result.snippet, когда он совпадает с filterQuery.

Что-то вроде (биты этого было скопировано с PHP версии я сделал в прошлом, поэтому несоответствующий синтаксис):

var keys = $scope.filterQuery.split(" "); 
result.snippet.replace('/('.implode('|', keys) .')/iu', '<b>\0</b>'); 

Но где бы это идти?

Answer 1

Создать search-result директиву, чтобы обернуть результат каждого поиска, где name должен быть установлен как полужирный:

<search-result result="result" name="name" ></search-result> 

Со следующим шаблоном:

directive.template: 'prefix text' + '<B>' + attrs.name + </B> + ' suffix text'; 

Answer 2

Там несколько способов, вы могли бы сделать это , в основном с использованием фильтров.

Вы можете написать свой собственный фильтр, который займет строку в поиске, найти ее в содержимом, который вы ищете, а затем добавить теги вокруг него и отправить его обратно.

Или вы можете использовать один из многих плагинов, который делает это.

Heres a question that talks about it

Angular UI Highlight