<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
<script src="http://chancejs.com/chance.js"></script>
<script src="//pineconellc.github.io/angular-foundation/mm-foundation-tpls-0.5.1.js"></script>
<script src="script.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.0/css/foundation.min.css" rel="stylesheet">
</head>
<body ng-app="app" ng-controller="MainCtrl">
<div class="row">
<div class="large-12 columns">
<em>For demo purposes, just type a last name below.</em>
</div>
</div>
<form ng-submit="search()">
<div class="row">
<div class="large-12 columns">
<div class="row collapse">
<div class="small-10 columns">
<input type="text" ng-model="criteria" placeholder="Type last name, SSN, or DOB" />
</div>
<div class="small-2 columns">
<button type="submit" class="button postfix">Go</button>
</div>
</div>
</div>
</div>
</form>
<div ng-show="currentSet.length > 0">
<div class="row">
<div class="large-12 columns">
<div class="text-right">
<i>Displaying results {{start + 1}}-{{start + currentSet.length}} of {{totalItems}}</i>
</div>
<table class="results">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>SSN</th>
<th>DOB</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in currentSet">
<td>{{i.lastName}}</td>
<td>{{i.firstName}}</td>
<td>{{i.ssn}}</td>
<td>{{i.dob | date: "MM/dd/yyyy"}}</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="large-12 columns pagination-centered">
<pagination total-items="totalItems"
page="currentPage"
max-size="10"
boundary-links="true"
rotate="false"
on-select-page="selectPage(page)"></pagination>
</div>
</div>
</div>
</div>
</body>
</html>
var app = angular.module('app', ['mm.foundation']);
app.controller('MainCtrl', function ($scope) {
$scope.items = [];
$scope.currentSet = [];
$scope.totalItems = 0;
$scope.currentPage = 0;
$scope.start = 0;
$scope.pageSize = 10;
$scope.loadLots = function() {
$scope.totalItems = chance.integer({min: 40, max: 80});
for (var i = 0; i < $scope.totalItems; i++) {
$scope.items.push({
firstName: chance.first(),
lastName: capitalize($scope.criteria),
ssn: chance.ssn(),
dob: chance.birthday()
});
}
};
$scope.search = function() {
if($scope.criteria.trim().length == 0) return;
$scope.items = [];
$scope.loadLots();
$scope.currentPage = 1;
$scope.start = 0;
$scope.page($scope.start, $scope.pageSize);
}
$scope.page = function(start, pageSize) {
var fin = (start + pageSize) <= $scope.items.length ? (start + pageSize) : $scope.items.length;
$scope.currentSet = [];
for (var i = start; i < fin; i++) {
$scope.currentSet.push($scope.items[i]);
}
}
$scope.selectPage = function(page) {
$scope.start = $scope.pageSize * (page - 1);
$scope.page($scope.start, $scope.pageSize);
}
});
function capitalize(inputValue) {
if (inputValue === undefined) { inputValue = ''; }
var capitalized = inputValue.charAt(0).toUpperCase() + inputValue.substring(1);
return capitalized;
}
table.results {
width: 100%;
}