Angularjs Iterating through array with loop

Question

Hi I am brand new to Angularjs and I have no clue what I'm doing. :) I need to be able to enter a credit card number in a textbox and then loop through to figure out what kind of credit card is being used and display an image for that credit card. So far I have the following code in my directive.

EDIT

app.directive('myDirective', function () {
return {
    restrict: 'E',
    scope: {
        cardNum: '=',
        cardType: '='
    },
    template: '',
    replace: true,
    link: function ($scope, elem, attr) {
        scope.$watch('cardNum', function (val) {
            var regMap = [
                      { id: 'visa', reg: '^4[0-9]{12}(?:[0-9]{3})?$' },
                      { id: 'mastercard', reg: '^5[1-5][0-9]{14}$' },
                      { id: 'discover', reg: '^6(?:011|5[0-9]{2})[0-9]{12}$' },
                      { id: 'amex', reg: '^3[47][0-9]{13}$' }
                    ];

            angular.forEach(regMap, function(e){
                //The current element of the regMap sits in e which is an object `{id:, :reg}`
                if(e.reg.test(val)) {
                    //In the above if you test if the val(which is the input value) is matching the regex `e.reg` and if there is a match you pass the id of the object to a scope variable which was sent into the directive.
                    scope.cardType = e.id
                }
            })
        })

    }
};
});    


                
                                                
                        {{ 'CC_NUMBER' | translate }}
                        
                        
                        
                        {{crdTy}}
                        Please enter a credit card number

                    
                    
                        
                        visa
                        mastercard
                        discover
                        amex

alexsmn · Accepted Answer

A quick solution. I'll improve it later if you want.

First add your html into a directive template if its not there at the moment.

Input in templete directive:

Directive:

app.directive('myDirective', function() {
  return {
  restrict: 'E',
  template: '',
  replace: true,
  link: function($scope, elem, attr) {
    $scope.$watch('cardNum', function(val){
      console.log($scope.cardNum)
    })
  }
 };
});

Now you can notice that every time you type something into your input, console.log will print the value, just take that value and do what you want with it.

Have a look here

UPDATE

Sorry for the wait.

First, you want to check the type of your card, by using regex expressions:

var regMap = [
  { id: 'visa', reg: /^4[0-9]{12}(?:[0-9]{3})?$/ }, 
  { id: 'mastercard', reg: /^5[1-5][0-9]{14}$/ }, 
  { id: 'discover', reg: /^6(?:011|5[0-9]{2})[0-9]{12}$/}, 
  { id: 'amex', reg: /^3[47][0-9]{13}$/ }
];

What you need to do now, is to check if your input is matching one regex from the above list.

scope.$watch('cardNum', function(val){
  //The value of the input sits in `val`
  angular.forEach(regMap, function(e){
    //The current element of the regMap sits in e which is an object `{id:, :reg}`
    if(e.reg.test(val)) {
    //In the above if you test if the val(which is the input value) is matching the regex `e.reg` and if there is a match you pass the id of the object to a scope variable which was sent into the directive.
      scope.cardType = e.id
    }
  })
})

The above pice of code, is watching the cardNum model, $watch('cardNum') and every time the value of cardNum changed the code inside the $watch scope will be run. Inside the scope there is a forEach loop which is taking each regex and tests the new value. If there is a match the some string is assigned to scope.cardType;

The directive scope:

scope: {
  cardNum: '=',
  cardType: '='
},

cardNum, will have the value of the input.

cardType, will be the type of your card.




{{crdTy}}

See how this works, here

Once you get the type of your card from crdTy which will be a string, you can then use them here:

span ng-show="crdTy == 'visa'">visa
mastercard
discover
amex

Angularjs Iterating through array with loop

Answers (1)

Related Questions