Card Flag directive for AngularJS
AngularJS directive to automatically show credit card flags while typing
This directive will look for attribute "creditcard-flag" on an input field, will add a class card-flag and a SPAN with a class "_flag" after it, when you start typing a number, it will add a class corresponding to the Credit Card brand.
All the magic happens in your CSS
<div class="form-group creditcard">
<input type="text"
class="form-control"
id="example1"
ng-model="field.example1"
placeholder="Credit Card Number"
maxlengh="19"
angular-mask="0000-0000-0000-0000"
creditcard-flag />
</div>
<style>
.card-flag + ._flag {
background: url(card-flag-highlight.png) no-repeat top left;
width: 50px;
height: 30px;
display: none;
position: absolute;
top: 2px;
right: -55px;
}
.card-flag.card-flag-amex + ._flag {
background-position: 0 0;
display: inline-block; }
.card-flag.card-flag-diners + ._flag {
background-position: 0 -160px;
display: inline-block; }
.card-flag.card-flag-elo + ._flag {
background-position: 0 -240px;
display: inline-block; }
.card-flag.card-flag-hipercard + ._flag {
background-position: 0 -320px;
display: inline-block; }
.card-flag.card-flag-master + ._flag {
background-position: 0 -400px;
display: inline-block; }
.card-flag.card-flag-visa + ._flag {
background-position: 0 -480px;
display: inline-block; }
.card-flag.card-flag-hiper + ._flag {
background-position: 0 -556px;
display: inline-block;}
.creditcard {
width: 180px;
position: relative;
}
</style>
<script type="text/javascript">
var app = angular.module('wender', ['angularMask','angular-creditcard-flag']);
app.controller('MainCtrl', function($scope) {
$scope.field = {
example1: null
};
});
</script>bower install angular-creditcard-flag --save