特定标签的 Angular ui-mask

Question

我有一个带有ui-mask="(999) 999-9999" 的电话数据输入，现在我需要使用{{phoneData}} 在<span> 中呈现电话数据。有没有办法在另一个 html 标签中使用 ui-mask，而不仅仅是在输入中，以显示漂亮的电话数据？不是 1234567890 而是 (123) 456-7890

Answer 1

在没有任何掩码的角度有非常简单的解决方案，但有过滤器模块：{{phoneData | tel}}

.filter('tel', function () {
    return function (tel, params) {
        if (!tel) { return ''; }
        var options = params || {};

        var plus = tel.toString().trim()[0] === '+' ? '+' : '';

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

        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:
                country = "";
                city = value.slice(0, 3);
                number = value.slice(3);
                break;
        }

        if (country === 1 || options.country === false) {
            country = "";
            plus = "";
        }

        if(number){
            if(number.length>3){
                number = number.slice(0, 3) + '-' + number.slice(3);
            }
            else{
                number = number;
            }

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