Format telephone and credit card numbers in AngularJS

by

Also, if you need to format telephone number on output only, you can use a custom filter like this one:

angular.module('ng').filter('tel', function () {
    return function (tel) {
        if (!tel) { return ''; }

        var value = tel.toString().trim().replace(/^\+/, '');

        if (value.match(/[^0-9]/)) {
            return tel;
        }

        var country, city, number;

        switch (value.length) {
            case 10: // +1PPP####### -> C (PPP) ###-####
                country = 1;
                city = value.slice(0, 3);
                number = value.slice(3);
                break;

            case 11: // +CPPP####### -> CCC (PP) ###-####
                country = value[0];
                city = value.slice(1, 4);
                number = value.slice(4);
                break;

            case 12: // +CCCPP####### -> CCC (PP) ###-####
                country = value.slice(0, 3);
                city = value.slice(3, 5);
                number = value.slice(5);
                break;

            default:
                return tel;
        }

        if (country == 1) {
            country = "";
        }

        number = number.slice(0, 3) + '-' + number.slice(3);

        return (country + " (" + city + ") " + number).trim();
    };
});

Then you can use this filter in your template:

{{ phoneNumber | tel }}
<span ng-bind="phoneNumber | tel"></span>

More Related Contents:

  1. how to convert the float 9.88 number to integer 9 in angularjs?
  2. ‘this’ vs $scope in AngularJS controllers
  3. How can I dynamically add a directive in AngularJS?
  4. Combating AngularJS executing controller twice
  5. AngularJS – Does $destroy remove event listeners?
  6. Difficulty with ng-model, ng-repeat, and inputs
  7. How to access cookies in AngularJS?
  8. Sending event when AngularJS finished loading
  9. AngularJS vs Angular [closed]
  10. AngularJS – pass function to directive
  11. AngularJS – How to structure a custom filter with ng-repeat to return items conditionally
  12. Angularjs: input[text] ngChange fires while the value is changing
  13. Angular.js: How does $eval work and why is it different from vanilla eval?
  14. angular $q, How to chain multiple promises within and after a for-loop
  15. AngularAMD + ui-router + dynamic controller name?
  16. how to inject dependency into module.config(configFn) in angular
  17. AngularJS : $q -> deferred API order of things (lifecycle) AND who invokes digest?
  18. Order by Object key in ng-repeat
  19. Sharing data between directives
  20. Using ng-app without a value
  21. Angular JS resizable div directive
  22. AngularJS: ngRoute Not Working
  23. “Uncaught Error: [$injector:unpr]” with angular after deployment
  24. How do I prevent reload on named view, when state changes? AngularJS UI-Router
  25. Is it possible to use ng-include without web server?
  26. What is ng-transclude?
  27. How to share data between two modules in AngularJS?
  28. AngularJS ng-model-options getter-setter
  29. When to use double braces {{}} in angularJS
  30. Angular reload current route and reload the current template

Leave a Comment