У меня есть список, отфильтрованный вот так:
ng-repeat="item in items | filter:query | limitTo:10"
и ввод поиска
ng-model="search.name"
Он работает, но я хотел бы сделать часть запроса в результатах полужирным.
Пример:
query = zza
результаты:
Вы можете создать свой собственный фильтр, который изменяет входные данные на основе строки поиска:
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/.
Два подсказки для ответа от 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>');