Search Highlight

ngFilters.js

var myApp = angular.module('myApp', []);

myApp.factory('Avengers', function () {
	var Avengers = {};
	Avengers.cast = [{
		name: "Robert Downey Jr.",
		character: "Tony Stark / Iron Man"
	},
		{
			name: "Chris Evans",
			character: "Steve Rogers / Captain America}"
		},
		{
			name: "Mark Ruffalo",
			character: "Bruce Banner / The Hulk}"
		},
		{
			name: "Chris Hemsworth",
			character: "Thor"
		},
		{
			name: "Scarlett Johansson",
			character: "Natasha Romanoff / Black Widow"
		},
		{
			name: "Jeremy Renner",
			character: "Clint Barton / Hawkeye"
		},
		{
			name: "Tom Hiddleston",
			character: "Loki"
		},
		{
			name: "Clark Gregg",
			character: "Agent Phil Coulson"
		},
		{
			name: "Cobie Smulders",
			character: "Agent Maria Hill"
		},
		{
			name: "Stellan Skarsgard",
			character: "Selvig"
		},
		{
			name: "Samuel L. Jackson",
			character: "Nick Fury"
		},
		{
			name: "Gwyneth Paltrow",
			character: "Pepper Potts"
		},
		{
			name: "Paul Bettany",
			character: "Jarvis (voice)"
		},
		{
			name: "Alexis Denisof",
			character: "The Other"
		},
		{
			name: "Tina Benko",
			character: "NASA Scientist"
		}];
	return Avengers;
});

function AvengersCtrl($scope, Avengers) {
	$scope.avengers = Avengers;
}

myApp.directive("highlight", function ($parse) {
	return {
		//scope: {
		//	bindField : "@"
		//},
		link: function (scope, element, attrs) {
			//console.log(scope.search);
			if (scope.search) {
				var searchValue = scope.search.$;
				var fn = $parse(attrs.bindField);
				text = fn(scope);
				//console.log(text(scope));

				if (text.indexOf(searchValue) >= 0) {

					var bolded = "<span style='color:red'>" + searchValue + "</span>";
					var replace = text.replace(searchValue, bolded);
					element.html(replace);
				} else {
					element.html(text);
				}

			}
		}
	}
})