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

发布时间：2020-12-17 09:04:36 所属栏目：安全来源：网络整理

导读：问题一(格式电话号码)：我不得不在AngularJS格式化电话号码，但没有过滤器。有没有办法使用过滤器或货币格式10位数字(555)555-5255？并仍然将该字段的数据类型保留为整数？问题二(屏蔽信用卡号码)：我有一个映射到AngularJS的信用卡字段，如： input type

问题一(格式电话号码)：

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

问题二(屏蔽信用卡号码)：

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

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

它返回整数(4222222222222222)。我想掩盖它与xxx的前12位数，并只显示最后4。我在想使用filter：limit为此，但不清楚如何。有任何想法吗？有没有办法还用短划线格式化数字，但仍保留数据类型为整数？排序4111-1111-1111-1111。

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

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!