在AngularJS中格式化电话和信用卡号码

Question

问题一(格式化电话号码):

我不得不格式化AngularJS中的电话号码,但没有过滤器.有没有办法使用过滤器或货币格式化10位数(555) 555-5255？并仍然将字段的数据类型保留为整数？

问题二(屏蔽信用卡号):

我有一个映射到AngularJS的信用卡字段,如:

<input type="text" ng-model="customer.creditCardNumber"> 

这是返回整数(4111111111111111).我想用xxx掩盖它的前12位数字,只显示最后的4位.我正在考虑使用filter:limit for this但是我不清楚如何.有任何想法吗？有没有办法用破折号格式化数字但仍保留数据类型为整数？有点4111-1111-1111-1111.

Answer 1

此外,如果您只需要在输出上格式化电话号码,您可以使用这样的自定义过滤器:

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();
    };
});

然后,您可以在模板中使用此过滤器:

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

Answer 2

我创建了一个AngularJS模块,通过自定义指令和附带的过滤器为我自己处理这个关于phonenumbers的问题.

jsfiddle示例:http://jsfiddle.net/aberke/s0xpkgmq/

过滤器使用示例: <p>{{ phonenumberValue | phonenumber }}</p>

过滤代码:

.filter('phonenumber', function() {
    /* 
    Format phonenumber as: c (xxx) xxx-xxxx
        or as close as possible if phonenumber length is not 10
        if c is not '1' (country code not USA), does not use country code
    */

    return function (number) {
        /* 
        @param {Number | String} number - Number that will be formatted as telephone number
        Returns formatted number: (###) ###-####
            if number.length < 4: ###
            else if number.length < 7: (###) ###

        Does not handle country codes that are not '1' (USA)
        */
        if (!number) { return ''; }

        number = String(number);

        // Will return formattedNumber. 
        // If phonenumber isn't longer than an area code, just show number
        var formattedNumber = number;

        // if the first character is '1', strip it out and add it back
        var c = (number[0] == '1') ? '1 ' : '';
        number = number[0] == '1' ? number.slice(1) : number;

        // # (###) ###-#### as c (area) front-end
        var area = number.substring(0,3);
        var front = number.substring(3, 6);
        var end = number.substring(6, 10);

        if (front) {
            formattedNumber = (c + "(" + area + ") " + front);  
        }
        if (end) {
            formattedNumber += ("-" + end);
        }
        return formattedNumber;
    };
});

指令使用示例:

<phonenumber-directive placeholder="'Input phonenumber here'" model='myModel.phonenumber'></phonenumber-directive>

指令代码:

.directive('phonenumberDirective', ['$filter', function($filter) {
    /*
    Intended use:
        <phonenumber-directive placeholder='prompt' model='someModel.phonenumber'></phonenumber-directive>
    Where:
        someModel.phonenumber: {String} value which to bind only the numeric characters [0-9] entered
            ie, if user enters 617-2223333, value of 6172223333 will be bound to model
        prompt: {String} text to keep in placeholder when no numeric input entered
    */

    function link(scope, element, attributes) {

        // scope.inputValue is the value of input element used in template
        scope.inputValue = scope.phonenumberModel;

        scope.$watch('inputValue', function(value, oldValue) {

            value = String(value);
            var number = value.replace(/[^0-9]+/g, '');
            scope.phonenumberModel = number;
            scope.inputValue = $filter('phonenumber')(number);
        });
    }

    return {
        link: link,
        restrict: 'E',
        scope: {
            phonenumberPlaceholder: '=placeholder',
            phonenumberModel: '=model',
        },
        // templateUrl: '/static/phonenumberModule/template.html',
        template: '<input ng-model="inputValue" type="tel" class="phonenumber" placeholder="{{phonenumberPlaceholder}}" title="Phonenumber (Format: (999) 9999-9999)">',
    };
}])

模块的完整代码以及如何使用它:https: //gist.github.com/aberke/042eef0f37dba1138f9e

Answer 3

正如shailbenq所说,phoneformat非常棒.

在您的网站中包含电话格式.为角度模块或应用程序创建过滤器.

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

        return formatLocal('US', phoneNumber); 
    }
});

然后,您可以在HTML中使用过滤器.

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

如果要在控制器中使用过滤器.

var number = '5553219876';
var newNumber = $filter('tel')(number);

Answer 4

我还发现JQuery插件很容易包含在你的Angular App中(也有bower:D),并用各自的掩码检查所有可能的国家代码: intl-tel-input

然后,您可以使用该validationScript选项来检查输入值的有效性.

Answer 5

Angular-ui有一个屏蔽输入的指令.也许这就是你想要掩盖的东西(不幸的是,文档并不那么棒):

http://angular-ui.github.com/

不过,我认为这不会有助于混淆信用卡号码.

Answer 6

您还可以检查输入掩码格式化程序.

这是一个指令,它被调用ui-mask,它也是angular-ui.utils库的一部分.

这是工作:实例

在写这篇文章的时候,没有任何使用这个指令的例子,所以我做了一个非常简单的例子来演示这个东西在实践中如何运作.

Answer 7

这是一种简单的方法.基本上我从http://codepen.io/rpdasilva/pen/DpbFf中获取了它,并做了一些更改.现在代码更简单.你可以得到:在控制器 - " 4124561232 ",在视图" (412)456-1232 "

过滤:

myApp.filter 'tel', ->
  (tel) ->
    if !tel
      return ''
    value = tel.toString().trim().replace(/^\+/, '')

    city = undefined
    number = undefined
    res = null
    switch value.length
      when 1, 2, 3
        city = value
      else
        city = value.slice(0, 3)
        number = value.slice(3)
    if number
      if number.length > 3
        number = number.slice(0, 3) + '-' + number.slice(3, 7)
      else
        number = number
      res = ('(' + city + ') ' + number).trim()
    else
      res = '(' + city
    return res

指令:

myApp.directive 'phoneInput', ($filter, $browser) ->

  require: 'ngModel'
  scope:
    phone: '=ngModel'
  link: ($scope, $element, $attrs) ->

    $scope.$watch "phone", (newVal, oldVal) ->
      value = newVal.toString().replace(/[^0-9]/g, '').slice 0, 10
      $scope.phone = value
      $element.val $filter('tel')(value, false)
      return
    return