Last active
August 29, 2015 14:17
-
-
Save jamesrcounts/2112ff6aa4ecbbf5fd5e to your computer and use it in GitHub Desktop.
Highlight Match Directive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>AngularJS Tutorials</title> | |
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.4.7/css/foundation.css"> | |
</head> | |
<body> | |
<div ng-app="myApp"> | |
<!-- we've replaced the use of $scope with the preferred "controller as" syntax. see: http://toddmotto.com/digging-into-angulars-controller-as-syntax/--> | |
<div ng-controller="AvengersCtrl as avengersCtrl"> | |
<input type="text" ng-model="search.$" ng-model-options="{ debounce: 200}"> | |
<table> | |
<tr ng-repeat="actor in avengersCtrl.avengers.cast | filter:search"> | |
<td highlight-match>{{actor.name}}</td> | |
<td highlight-match>{{actor.character}}</td> | |
</tr> | |
</table> | |
</div> | |
</div> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script> | |
<script type="text/javascript" src="main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(Avengers) { | |
var avengersCtrl = this; | |
avengersCtrl.avengers = Avengers; | |
} | |
myApp.controller("AvengersCtrl", AvengersCtrl); | |
myApp.directive("highlightMatch", function () { | |
return function (scope, element) { | |
scope.$watch('search.$', function () { | |
var query = (scope.search || {}).$; | |
var text = element.text(); | |
if (query) { | |
var re = new RegExp("(" + query + ")", "i"); | |
if (re.test(text)) { | |
text = text.replace(re, "<span style='color: red'>$1</span>"); | |
element.html(text); | |
} else { | |
element.text(text); | |
} | |
} else | |
{ | |
element.text(text) | |
} | |
}); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment