指令允许只有字母字符在视图和模型值 [英] Directive to allow only alphabetic characters in view and model value
问题描述
我尝试这样做,
'pre>
angular.module('myApp',[])。directive('alphabetsOnly',function(){
return {
require:'ngModel' ,
link:function(scope,element,attrs,modelCtrl){
modelCtrl。$ parsers.push(function(inputValue){
if(inputValue == undefined)return '
var convertedInput = inputValue.replace(/ ^ [a-zA-Z] + $ /,'');
if(convertedInput!= inputValue){
modelCtrl。$ setViewValue (convertedInput);
modelCtrl $ render();
}
return convertedInput;
});
}
};
});
函数MyCtrl($ scope){
$ scope.name =''
}
但这不起作用。
尝试使用模式
'/ ^ [a-zA-Z] $ /'
但没有成功。任何人都可以帮助我。
你只需要移动插入符号 ^
括号内的否定字母,留下所有其他替换。 [^ A-ZA-Z]
。您最终不需要 $
。
这是一个如何使更多可重用的示例指示。你可以使用这种方式进行各种各样的事情。
< input replace =[^ a-zA-Z] =ng-model =name>
.directive('replace',function() b $ b return {
require:'ngModel',
scope:{
regex:'@replace',
with:'@with'
},
link:function(scope,element,attrs,model){
model。$ parsers.push(function(val){
if(!val){return;}
var regex = new RegExp(scope.regex);
var replaced = val.replace(regex,scope.with);
if(replaced!== val){
model。$ setViewValue替换);
模型$ render();
}
返回替换;
});
}
};
})
如果你想使用这个替换
指令,但是经常使用一个特定的公式,你可以通过使用另一个指令来保持你的代码DRY:
< input仅字母ng-model =名称>
.directive('lettersOnly',function(){
return {
replace:true,
template:'< input replace =[^ a-zA-Z]with =>'
};
})
I am trying to achieve a directive that would be used to accept only alphabets into the text box i.e from a-z or A-z I did try to do this by,
angular.module('myApp', []).directive('alphabetsOnly', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
if (inputValue == undefined) return ''
var transformedInput = inputValue.replace(/^[a-zA-Z]+$/, '');
if (transformedInput!=inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
});
function MyCtrl($scope) {
$scope.name = ''
}
but this does not works .
tried with pattern
'/^[a-zA-Z]$/'
but no success. Can anyone help me with this.
You just need to move the caret ^
inside the brackets to negate letters, leaving everything else to be replaced. [^a-zA-Z]
. You don't need the $
on the end either.
Here's an example of how to make a more reusable directive. You could use this for all kinds of things.
<input replace="[^a-zA-Z]" with="" ng-model="name">
.directive('replace', function() {
return {
require: 'ngModel',
scope: {
regex: '@replace',
with: '@with'
},
link: function(scope, element, attrs, model) {
model.$parsers.push(function(val) {
if (!val) { return; }
var regex = new RegExp(scope.regex);
var replaced = val.replace(regex, scope.with);
if (replaced !== val) {
model.$setViewValue(replaced);
model.$render();
}
return replaced;
});
}
};
})
If you wanted to use this replace
directive, but used a particular formula often, you could keep your code DRY by making another directive that uses this one:
<input letters-only ng-model="name">
.directive('lettersOnly', function() {
return {
replace: true,
template: '<input replace="[^a-zA-Z]" with="">'
};
})
这篇关于指令允许只有字母字符在视图和模型值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!