Skip to content

Instantly share code, notes, and snippets.

@jamesrcounts
Last active August 29, 2015 14:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesrcounts/2112ff6aa4ecbbf5fd5e to your computer and use it in GitHub Desktop.
Save jamesrcounts/2112ff6aa4ecbbf5fd5e to your computer and use it in GitHub Desktop.
Highlight Match Directive
<!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>
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