AngularJS: фильтр и полужирная часть результата

У меня есть список, отфильтрованный вот так:

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

и ввод поиска

ng-model="search.name"

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

Пример:

query = zza

результаты:

Li * ZZA *
Pi * ZZA *
Abc * ZZA * Защита

Ответ 1

Вы можете создать свой собственный фильтр, который изменяет входные данные на основе строки поиска:

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

Это работает, но фильтр возвращает html, поэтому вам нужно сообщить angular для обработки результата как html. Для этого вам нужно включить ngSanitize в качестве зависимости от модуля и вставить результат с помощью ng-bind-html.
Здесь полная демоверсия:

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

И часть angular:

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

Здесь онлайн-демонстрация: http://jsfiddle.net/gion_13/ZDWdH/2/.

Ответ 2

Два подсказки для ответа от gion_13.

Если запрос представляет собой пустую строку (после фильтрации и затем удаления поискового запроса), то вход "яблоко" изменяется следующим образом: яблоко

Решение для этого - изменить либо регулярное выражение, либо раннее возвращение:

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

Если вам не нужен фильтр, чувствительный к регистру, чем изменение RegExp:

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