<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="angular-credit-cards@*" data-semver="3.0.1" src="https://rawgit.com/bendrucker/angular-credit-cards/v3.0.1/release/angular-credit-cards.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-app="ccDemoApp">
<div class="container">
<h1>
<a href="https://github.com/bendrucker/angular-credit-cards">
angular-credit-cards
</a>
Demo
</h1>
<form name="ccForm">
<div class="form-group">
<label for="card-number">Card Number</label>
<input type="text" class="form-control" id="cardNumber" cc-number cc-eager-type name="ccNumber" ng-model="card.number">
</div>
<table class="table">
<tr>
<th>Valid</th>
<th>Eager Type</th>
<th>Type</th>
</tr>
<tr>
<td>
{{ccForm.ccNumber.$valid | yesNo}}
</td>
<td>
{{ccForm.ccNumber.$ccEagerType || 'Unknown'}}
</td>
<td>
{{ccForm.ccNumber.$ccType || 'Unknown'}}
</td>
</tr>
</table>
<div class="form-group">
<label for="cvc">CVC</label>
<input type="text" class="form-control" id="cvc" cc-cvc cc-type="ccForm.ccNumber.$ccType" name="ccCvc" ng-model="card.cvc">
</div>
<table class="table">
<tr>
<th>Valid</th>
</tr>
<tr>
<td>
{{ccForm.ccCvc.$valid | yesNo}}
</td>
</tr>
</table>
<div class="form-group">
<label for="card-number">Expiration</label>
<div class="row" cc-exp>
<div class="col-xs-3">
<input placeholder="MM" type="text" class="form-control" cc-exp-month name="ccExpMonth" ng-model="card.expiration.month">
</div>
<div class="col-xs-3">
<input placeholder="YY" type="text" class="form-control" cc-exp-year name="ccExpYear" ng-model="card.expiration.year">
</div>
</div>
</div>
<table class="table">
<tr>
<th>Valid Month</th>
<th>Valid Year</th>
<th>Valid Pair</th>
</tr>
<tr>
<td>
{{ccForm.ccExpMonth.$valid | yesNo}}
</td>
<td>
{{ccForm.ccExpYear.$valid | yesNo}}
</td>
<td>
{{!ccForm.$error.ccExp | yesNo}}
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
angular.module('ccDemoApp', [
'credit-cards'
])
.filter('yesNo', function () {
return function (boolean) {
return boolean ? 'Yes' : 'No';
}
})
/* Styles go here */