質問 1 (電話番号の書式設定):
AngularJS で電話番号をフォーマットする必要がありますが、そのためのフィルターはありません。フィルターまたは通貨を使用して 10 桁を にフォーマットする方法はあります(555) 555-5255か? それでもフィールドのデータ型を整数として保持しますか?
質問 2 (クレジット カード番号のマスキング):
次のように、AngularJS にマッピングされたクレジット カード フィールドがあります。
<input type="text" ng-model="customer.creditCardNumber">
これは整数 ( 4111111111111111) を返します。最初の 12 桁を xxx でマスクし、最後の 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>
カスタム ディレクティブと付随するフィルターを使用して、自分の電話番号に関するこの問題を処理する AngularJS モジュールを作成しました。
jsfiddle の例: http://jsfiddle.net/aberke/s0xpkgmq/
フィルター使用例:
<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
また、Angular アプリに簡単に含めることができ (bower :D も使用)、それぞれのマスクですべての可能な国コードをチェックする JQuery プラグインも見つかりました: intl-tel-input
次に、このオプションを使用してvalidationScript、入力値の有効性を確認できます。
Angular-ui には、入力をマスキングするためのディレクティブがあります。おそらく、これはマスキングに必要なものです (残念ながら、ドキュメントはそれほど優れていません)。
ただし、これがクレジットカード番号の難読化に役立つとは思いません。
これが簡単な方法です。基本的に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
input mask formatterも確認できます。
これはディレクティブであり、呼び出され、ライブラリui-maskの一部でもあります。angular-ui.utils
ここで動作しています:ライブの例
この記事を書いている時点では、このディレクティブを使用した例はありません。そのため、このことが実際にどのように機能するかを示すために、非常に簡単な例を作成しました。
この形式で電話番号を出力するようにコードを修正しました 値: +38 (095) 411-22-23 ここで確認できますここにリンクの説明を入力してください
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();
}
};
});
パターンをチェックするssnディレクティブを作成し、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);
};
}
};
}
電話番号とクレジット カード用のカスタム フォーム コントロールを (ディレクティブとして) 作成する必要があります。フォームページの「カスタム フォーム コントロールの実装 (ngModel を使用)」セクションを参照してください。
Narretz が既に述べたように、Angular-ui のMask ディレクティブは、始めるのに役立つはずです。
このような単純なフィルター ([] 内の入力終了フィルター チャートで数値クラスを使用):
<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 !!!
});