SORU
2 EKİM 2012, Salı


AngularJS biçiminde telefon ve kredi kartı numaraları

Soru (telefon numarası biçimlendirme):

Biçimine AngularJS telefon numarası geçiriyorum ama bunun için filtre yok. Bir şekilde filtre veya para (555) 555-5255 10 basamaklı biçimi var mı acaba? ve hala bu alanın veri türünü korumak gibi tamsayı?

Soru iki (kredi kartı numarası maskeleme):

AngularJS gibi eşleştirilmiş kredi kartı alan var:

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

tam sayı (4111111111111111) dönüyor. İlk 12 basamak xxx ve sadece son 4 gösteri ile maske gibi olacak. Filtre kullanmayı düşünüyordum: bu limit ama ne kadar net değilim. Herhangi bir fikir? Bir taraftan da tire ile sayı biçimi ama yine de veri türü olarak tamsayı korumak için var mı? 4111-1111-1111-1111 tür.

CEVAP
4 EKİM 2012, PERŞEMBE


Eğer çıkış sadece telefon numarası biçimi gerekiyorsa da, bunun gibi özel bir filtre kullanabilirsiniz:

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

Sonra bir şablon olarak bu filtreyi kullanabilirsiniz:

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Jonathan Leack

    Jonathan Lea

    26 ŞUBAT 2007
  • Manuel Vizcaino

    Manuel Vizca

    27 Mayıs 2008
  • MattSteffanina 2

    MattSteffani

    28 Kasım 2007