AngularJS : filter and bold part of the result

Question

I have a list filtered like this:

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

and a search input

ng-model=\"search.         


        

Answer 1

You can make your own custom filter that alters the input based on the search string :

angular.module('app').filter('searchfilter', function() {
    return function (input, query) {
        var r = RegExp('('+ query + ')', 'g');
        return input.replace(r, '$1');
    }
});

This works, but the filter returns html, so you will need to tell angular to treat the result as html. In order to do this, you need to include ngSanitize as a module dependency and insert the result with ng-bind-html.
Here's a complete demo :

And the angular part :

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

Here's the online demo: http://jsfiddle.net/gion_13/ZDWdH/2/.