AngularJS Example:
by wuct
HTML
<div class="container" ng-app="myApp">
<h1>ngFilters</h1>
<hr>
<div ng-controller="AvengersCtrl">
<p>Search thru the table:</p>
<!-- For all columns -->
<!-- <input type="text" ng-model="search.$"> -->
<!-- for actor -->
<input type="text" ng-model="search">
<table class="table table-striped">
<thead>
<tr>
<th>Actor</th>
<th>Character</th>
</tr>
</thead>
<tr ng-repeat="actor in avengers.cast | filter:search">
<td>{{actor.name}}</td>
<td>{{actor.character}}</td>
</tr>
</table>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<style>
JavaScript
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;
}