kenkeiter / skeuocard

Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface.
http://kenkeiter.com/skeuocard/
MIT License
3.23k stars 231 forks source link

Skeucard Angular #152

Closed MatayoshiMariano closed 9 years ago

MatayoshiMariano commented 9 years ago

Hi guys, it exists a way of binding the inputs of skeuocard with angular directives, such as ng-model. Thanks!

paveltyk commented 9 years ago

@MatayoshiMariano did you ever solved this?

MatayoshiMariano commented 9 years ago

Kinda, I did something like this:

var scope = angular.element($("select")).scope();

if (!card.isValid()) {
    scope.errorMessage = "Invalid Payment Information";
    console.log('invalid');
    return false; // not a valid card; don't allow submission
} else {

    var ccType = $('#cc_type option:selected').text();

    var ccName = $('#cc_name').val();
    var ccNumber = $('#cc_number').val();
    var ccExpMonth = $('#cc_exp_month').val();
    var ccExpYear = $('#cc_exp_year').val();
    var ccCvc = $('#cc_cvc').val();

    scope.$apply(function () {
        scope.PaymentOption.CardType = ccType;

        scope.PaymentOption.NameOnCard = ccName;
        scope.PaymentOption.CardNumber = ccNumber;
        scope.PaymentOption.CardExpiryMonth = ccExpMonth;
        scope.PaymentOption.CardExpiryYear = ccExpYear;
        scope.PaymentOption.Cvc = ccCvc;

    });
}