Format telephone and credit card numbers in AngularJS

前端 未结 17 2172
猫巷女王i
猫巷女王i 2020-11-30 18:29

Question one (formatting telephone number):

I\'m having to format a telephone number in AngularJS but there is no filter for it. Is there a way to u

17条回答
  •  无人及你
    2020-11-30 19:00

    I modified the code to output phone in this format Value: +38 (095) 411-22-23 Here you can check it enter link description here

        var myApp = angular.module('myApp', []);
    
    myApp.controller('MyCtrl', function($scope) {
      $scope.currencyVal;
    });
    
    myApp.directive('phoneInput', function($filter, $browser) {
        return {
            require: 'ngModel',
            link: function($scope, $element, $attrs, ngModelCtrl) {
                var listener = function() {
                    var value = $element.val().replace(/[^0-9]/g, '');
                    $element.val($filter('tel')(value, false));
                };
    
                // This runs when we update the text field
                ngModelCtrl.$parsers.push(function(viewValue) {
                    return viewValue.replace(/[^0-9]/g, '').slice(0,12);
                });
    
                // This runs when the model gets updated on the scope directly and keeps our view in sync
                ngModelCtrl.$render = function() {
                    $element.val($filter('tel')(ngModelCtrl.$viewValue, false));
                };
    
                $element.bind('change', listener);
                $element.bind('keydown', function(event) {
                    var key = event.keyCode;
                    // If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
                    // This lets us support copy and paste too
                    if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)){
                        return;
                    }
                    $browser.defer(listener); // Have to do this or changes don't get picked up properly
                });
    
                $element.bind('paste cut', function() {
                    $browser.defer(listener);
                });
            }
    
        };
    });
    myApp.filter('tel', function () {
        return function (tel) {
            console.log(tel);
            if (!tel) { return ''; }
    
            var value = tel.toString().trim().replace(/^\+/, '');
    
            if (value.match(/[^0-9]/)) {
                return tel;
            }
    
            var country, city, num1, num2, num3;
    
            switch (value.length) {
                case 1:
                case 2:
                case 3:
                    city = value;
                    break;
    
                default:
                    country = value.slice(0, 2);
                    city = value.slice(2, 5);
                    num1 = value.slice(5,8);
                    num2 = value.slice(8,10);
                    num3 = value.slice(10,12);            
            }
    
            if(country && city && num1 && num2 && num3){
                return ("+" + country+" (" + city + ") " + num1 +"-" + num2 + "-" + num3).trim();
            }
            else if(country && city && num1 && num2) {
                return ("+" + country+" (" + city + ") " + num1 +"-" + num2).trim();
            }else if(country && city && num1) {
                return ("+" + country+" (" + city + ") " + num1).trim();
            }else if(country && city) {
                return ("+" + country+" (" + city ).trim();
            }else if(country ) {
                return ("+" + country).trim();
            }
    
        };
    });
    

提交回复
热议问题