在AngularJS中设置电话和信用卡号

Question

问题一（格式化电话号码）：

我必须在AngularJS中格式化电话号码，但是没有用于它的过滤器。有没有办法使用过滤器或货币将10位数字格式化为[phone]？仍然将字段的数据类型保留为整数？

问题二（掩盖信用卡号）：

我有一个映射到AngularJS的信用卡字段，例如：

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

这将返回整数（4111111111111111）。我想用xxx屏蔽掉它的前12位数字，而只显示最后4位数字。我正在考虑使用filter：限制，但不清楚如何。有任何想法吗？有没有一种方法也可以用破折号格式化数字，但仍将数据类型保留为整数？有点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>