javascript 指令只允许在视图和模型值中使用字母字符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28230080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Directive to allow only alphabetic characters in view and model value
提问by Hmahwish
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,
我正在尝试实现一个指令，该指令仅用于将字母输入到文本框中，即来自 az 或 Az 我确实尝试通过以下方式执行此操作，
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.
但没有成功。谁能帮我这个。
回答by m59
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.
您只需要移动^括号内的插入符号即可否定字母，而其他所有内容都需要替换。[^a-zA-Z]. 你也不需要$最后。
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 replacedirective, but used a particular formula often, you could keep your code DRY by making another directive that uses this one:
如果你想使用这个replace指令，但经常使用一个特定的公式，你可以通过创建另一个使用这个指令的指令来保持代码干燥：
<input letters-only ng-model="name">
.directive('lettersOnly', function() {
return {
replace: true,
template: '<input replace="[^a-zA-Z]" with="">'
};
})
回答by Abijith Ajayan
Try with below Answer. 100% It will work.....
试试下面的答案。100％它会起作用......
var app = angular.module('myApp', []);
(function() {
app.directive('onlyLettersInput', onlyLettersInput);
function onlyLettersInput() {
return {
require: 'ngModel',
link: function(scope, element, attr, ngModelCtrl) {
function fromUser(text) {
var transformedInput = text.replace(/[^a-zA-Z]/g, '');
//console.log(transformedInput);
if (transformedInput !== text) {
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
}
return transformedInput;
}
ngModelCtrl.$parsers.push(fromUser);
}
};
};
})();<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css" rel="stylesheet"/>
<div ng-app="myApp">
<div class="row">
<div class="text-center"><h4>AngularJS Directive - only letters input</h4></div>
<div class="small-8 small-centered columns panel">
<form>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Only letters input</label>
</div>
<div class="small-9 columns">
<input only-letters-input type="text" id="right-label" ng-model="myForm.onlyLetters">
</div>
</div>
</form>
<pre>myForm = {{myForm | json}}</pre>
</div>
</div>