在AngularJS中设置电话号码和信用卡号码
问题一（格式化电话号码）：
我不得不在AngularJS中格式化一个电话号码，但是没有filter。 有没有办法使用filter或货币格式10位数字(555) 555-5255 ？ 仍然保持字段的数据types为整数？
问题二（掩盖信用卡号码）：
我有一个映射到AngularJS的信用卡字段，如：
<input type="text" ng-model="customer.creditCardNumber">
这是返回整个号码（ 4111111111111111 ）。 我想用xxx前12个数字掩盖它，只显示最后4.我想使用filter：限制这个，但我不清楚如何。 有任何想法吗？ 有没有办法使用破折号格式化数字，但仍保留数据types为整数？ 4111-1111-1111-1111 。
此外，如果您只需要在输出上设置电话号码格式，则可以使用如下所示的自定义filter：
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(); }; });
那么你可以在你的模板中使用这个filter：
{{ phoneNumber | tel }} <span ng-bind="phoneNumber | tel"></span>
我创build了一个AngularJS模块来处理与自定义指令和伴随filter有关的电话号码这个问题。
jsfiddle例子： http : //jsfiddle.net/aberke/s0xpkgmq/
filter使用示例： <p>{{ phonenumberValue | phonenumber }}</p> <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
shailbenqbuild议， phoneformat是真棒。
在您的网站中包含电话格式。 为angular度模块或应用程序创build一个filter。
angular.module('ng') .filter('tel', function () { return function (phoneNumber) { if (!phoneNumber) return phoneNumber; return formatLocal('US', phoneNumber); } });
然后你可以在你的HTML中使用filter。
{{phone|tel}} OR <span ng-bind="phone|tel"></span>
如果你想在控制器中使用filter。
var number = '5553219876'; var newNumber = $filter('tel')(number);
我还发现JQuery插件很容易包含在你的Angular App中（还有bower：D），并且用各自的掩码检查所有可能的国家代码： intl-tel-input
然后，您可以使用validationScript选项来检查input值的有效性。
您也可以检查input掩码格式化程序 。
这是一个指令，它被称为ui-mask ，它也是angular-ui.utils库的一部分。
这里工作： 现场的例子
在写这篇文章的时候没有任何使用这个指令的例子，所以我举了一个非常简单的例子来演示这个东西在实际中是如何工作的。
这是简单的方法。 至于基本，我从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
尝试使用phoneformat.js（ http://www.phoneformat.com/ ），您不仅可以根据用户地区（en-US，ja-JP，fr-FR，de-DE等）格式化电话号码，还可以validation电话号码。 它基于Google的libphonenumber项目非常强大的库。
你可以使用更简单，更轻的ng-pattern。 http://tutorialzine.com/2014/12/learn-regular-expressions-in-20-minutes/ 。 在这里，你可以知道，只是一些有意义的话,,,不需要任何指示或过滤,,,,
我把阿尔法的解决scheme，并修改它，以适应我的口味。
- 它产生一个单一的input元素
- 它可以select接受扩展
- 美国数字跳过主要国家的代码
- 标准的命名约定
- 从使用代码使用类; 不组成一个class级
- 允许使用input元素上允许的任何其他属性
我的代码笔
var myApp = angular.module('myApp', []); myApp.controller('exampleController', function exampleController($scope) { $scope.user = { profile: {HomePhone: '(719) 465-0001 x1234'}}; $scope.homePhonePrompt = "Home Phone"; }); myApp /* Intended use: <phone-number placeholder='prompt' model='someModel.phonenumber' /> Where: someModel.phonenumber: {String} value which to bind formatted or unformatted phone number prompt: {String} text to keep in placeholder when no numeric input entered */ .directive('phoneNumber', ['$filter', function ($filter) { 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.inputValue = $filter('phoneNumber')(number, scope.allowExtension); scope.phoneNumberModel = scope.inputValue; }); } return { link: link, restrict: 'E', replace: true, scope: { phoneNumberPlaceholder: '@placeholder', phoneNumberModel: '=model', allowExtension: '=extension' }, template: '<input ng-model="inputValue" type="tel" placeholder="{{phoneNumberPlaceholder}}" />' }; } ] ) /* Format phonenumber as: (aaa) ppp-nnnnxeeeee or as close as possible if phonenumber length is not 10 does not allow country code or extensions > 5 characters long */ .filter('phoneNumber', function() { return function(number, allowExtension) { /* @param {Number | String} number - Number that will be formatted as telephone number Returns formatted number: (###) ###-#### x ##### if number.length < 4: ### else if number.length < 7: (###) ### removes country codes */ if (!number) { return ''; } number = String(number); number = number.replace(/[^0-9]+/g, ''); // 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 var c = (number[0] == '1') ? '1 ' : ''; number = number[0] == '1' ? number.slice(1) : number; // (###) ###-#### as (areaCode) prefix-endxextension var areaCode = number.substring(0, 3); var prefix = number.substring(3, 6); var end = number.substring(6, 10); var extension = number.substring(10, 15); if (prefix) { //formattedNumber = (c + "(" + area + ") " + front); formattedNumber = ("(" + areaCode + ") " + prefix); } if (end) { formattedNumber += ("-" + end); } if (allowExtension && extension) { formattedNumber += ("x" + extension); } return formattedNumber; }; } );
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="exampleController"> <p>Phone Number Value: {{ user.profile.HomePhone || 'null' }}</p> <p>Formatted Phone Number: {{ user.profile.HomePhone | phoneNumber }}</p> <phone-number id="homePhone" class="form-control" placeholder="Home Phone" model="user.profile.HomePhone" ng-required="!(user.profile.HomePhone.length || user.profile.BusinessPhone.length || user.profile.MobilePhone.length)" /> </div>
我修改了这个格式输出电话的代码值： +38（095）411-22-23在这里你可以检查它input链接描述在这里
var myApp = angular.module('myApp', []); myApp.controller('MyCtrl', function($scope) { $scope.currencyVal; }); myApp.directive('phoneInput', function($filter, $browser) { return { require: 'ngModel', link: function($scope, $element, $attrs, ngModelCtrl) { var listener = function() { var value = $element.val().replace(/[^0-9]/g, ''); $element.val($filter('tel')(value, false)); }; // This runs when we update the text field ngModelCtrl.$parsers.push(function(viewValue) { return viewValue.replace(/[^0-9]/g, '').slice(0,12); }); // This runs when the model gets updated on the scope directly and keeps our view in sync ngModelCtrl.$render = function() { $element.val($filter('tel')(ngModelCtrl.$viewValue, false)); }; $element.bind('change', listener); $element.bind('keydown', function(event) { var key = event.keyCode; // If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing. // This lets us support copy and paste too if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)){ return; } $browser.defer(listener); // Have to do this or changes don't get picked up properly }); $element.bind('paste cut', function() { $browser.defer(listener); }); } }; }); myApp.filter('tel', function () { return function (tel) { console.log(tel); if (!tel) { return ''; } var value = tel.toString().trim().replace(/^\+/, ''); if (value.match(/[^0-9]/)) { return tel; } var country, city, num1, num2, num3; switch (value.length) { case 1: case 2: case 3: city = value; break; default: country = value.slice(0, 2); city = value.slice(2, 5); num1 = value.slice(5,8); num2 = value.slice(8,10); num3 = value.slice(10,12); } if(country && city && num1 && num2 && num3){ return ("+" + country+" (" + city + ") " + num1 +"-" + num2 + "-" + num3).trim(); } else if(country && city && num1 && num2) { return ("+" + country+" (" + city + ") " + num1 +"-" + num2).trim(); }else if(country && city && num1) { return ("+" + country+" (" + city + ") " + num1).trim(); }else if(country && city) { return ("+" + country+" (" + city ).trim(); }else if(country ) { return ("+" + country).trim(); } }; });
您将需要为电话号码和信用卡创build自定义表单控件（作为指令）。 请参阅表格页面上的“实现自定义表单控件（使用ngModel）”一节。
正如Narretz已经提到的，Angular-ui的Mask指令应该帮助你开始。
简单的filter就像这样（在[]中使用input结束filtercharchter的数字类）：
<script type="text/javascript"> // Only allow number input $('.numeric').keyup(function () { this.value = this.value.replace(/[^0-9+-\.\,\;\:\s()]/g, ''); // this is filter for telefon number !!! });
这是我创buildssn指令的方式，它检查模式，我已经使用RobinHerbots jquery.inputmask
angular.module('SocialSecurityNumberDirective', []) .directive('socialSecurityNumber', socialSecurityNumber); function socialSecurityNumber() { var jquery = require('jquery'); var inputmask = require("jquery.inputmask"); return { require: 'ngModel', restrict: 'A', priority: 1000, link: function(scope,element, attr, ctrl) { var jquery_element = jquery(element); jquery_element.inputmask({mask:"***-**-****",autoUnmask:true}); jquery_element.on('keyup paste focus blur', function() { var val = element.val(); ctrl.$setViewValue(val); ctrl.$render(); }); var pattern = /^\d{9}$/; var newValue = null; ctrl.$validators.ssnDigits = function(value) { newValue = element.val(); return newValue === '' ? true : pattern.test(newValue); }; } }; }
我也用自定义的Angularfilter解决了这个问题，但是我利用正则expression式捕获组，所以代码非常短。 我将它与一个单独的stripNonNumericfilter配对以消毒input：
app.filter('stripNonNumeric', function() { return function(input) { return (input == null) ? null : input.toString().replace(/\D/g, ''); } });
phoneFormatfilter正确地格式化电话号码，有或没有区号。 （我不需要国际号码支持）
app.filter('phoneFormat', function() { //this establishes 3 capture groups: the first has 3 digits, the second has 3 digits, the third has 4 digits. Strings which are not 7 or 10 digits numeric will fail. var phoneFormat = /^(\d{3})?(\d{3})(\d{4})$/; return function(input) { var parsed = phoneFormat.exec(input); //if input isn't either 7 or 10 characters numeric, just return input return (!parsed) ? input : ((parsed[1]) ? '(' + parsed[1] + ') ' : '') + parsed[2] + '-' + parsed[3]; } });
简单地使用它们：
<p>{{customer.phone | stripNonNumeric | phoneFormat}}</p>
stripNonNumericfilter的正则expression式来自这里 。
使用angularjs指令查找格式化信用卡号码的调度程序。 在xxxxxxxxxxxx3456 Fromat中格式化卡号。
angular.module('myApp', []) .directive('maskInput', function() { return { require: "ngModel", restrict: "AE", scope: { ngModel: '=', }, link: function(scope, elem, attrs) { var orig = scope.ngModel; var edited = orig; scope.ngModel = edited.slice(4).replace(/\d/g, 'x') + edited.slice(-4); elem.bind("blur", function() { var temp; orig = elem.val(); temp = elem.val(); elem.val(temp.slice(4).replace(/\d/g, 'x') + temp.slice(-4)); }); elem.bind("focus", function() { elem.val(orig); }); } }; }) .controller('myCtrl', ['$scope', '$interval', function($scope, $interval) { $scope.creditCardNumber = "1234567890123456"; }]);
在angular度应用程序中注入“xeditable”模块（免费提供）：
var App = angular.module('App', ['xeditable']);
然后在您的HTML代码中使用其内置function，如下所示：
<div>{{ value|number:2 }}</div>
