Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
JavaScript: Sorting and filtering data with AngularJS
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>AngularJS Sorting &amp; Filtering Example</title>
<style type="text/css">
body{ font:12px arial, sans-serif; line-height:1.6em; margin:0 auto; max-width:960px; }
form{ text-align:right; }
h1, h2, hr, p, table{ margin-bottom:20px; }
table{ width:100%; }
th, td{ padding:5px; text-align:left; vertical-align:top; }
th{ background:#ccc; }
.even{ background-color:#efefef; }
<!-- include the core AngularJS library -->
<script src=""></script>
// create a method that we will use as the constructor for our contact list
function ContactListCtrl($scope){
// create an array of contacts (we could retrieve this data from a web service)
$scope.contacts = [
{ "pfirstname":"Simon", "plastname":"Bingham", "ptelephone":"00000 000000" }
, { "pfirstname":"Andy", "plastname":"Beer", "ptelephone":"00000 000000" }
, { "pfirstname":"John", "plastname":"Whish", "ptelephone":"00000 000000" }
use ngApp ( to bootstrap AngularJS
to our application and ngController
to create a new scope using our ContactListCtrl method (above) as the constructor
<body ng-app ng-controller="ContactListCtrl">
<h1>AngularJS Sorting &amp; Filtering Example</h1>
use ngModel (
to set-up a two way data binding called query
Search: <input ng-model="query">
use ngModel (
to set-up a two way data binding called sortorder
<select ng-model="sortorder">
<option value="">-- sort order --</option>
<option value="plastname">Ascending</option>
<option value="-plastname">Descending</option>
display the number of (filtered) contacts using ngShow
to display additional text if a search query has been entered
<p>There are <strong>{{(contacts|filter:query).length}}</strong> contacts<span ng-show="query.length"> matching &quot;{{query}}&quot;</span>.</p>
use ngShow to detect whether filtered contacts exist
and display the table if they do
<table class="contacts" ng-show="(contacts|filter:query).length">
use ngRepeat ( to loop
through and output our contacts with the filter and sort order applied
<tr ng-repeat="contact in contacts|filter:query|orderBy:sortorder">
use ngClassEven (
to apply a class to even rows so we can make our table stripey
<td ng-class-even="'even'">{{contact.plastname}}, {{contact.pfirstname}}</td>
<td ng-class-even="'even'">{{contact.ptelephone}}</td>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment