Angular textarea 指令:允许数字,不允许逗号,允许点?
Angular textarea directive: numbers allowed, no commas, dots allowed?
我有一个文本区域,它保存多个值作为数组存储在 ng-model 中。按回车键并插入新的有效字符(数字和点)后,将在数组中创建一个新值。
我正在尝试调整我在答案中找到的自定义指令。但是我还有以下问题:
1- 您仍然可以输入连续的点 as(34...5),这是不允许的。
2-如果同一个键被按下两次,直到按下一个新键,它才会被接受。因此,如果我按字符 "d" 两次,它就会在文本区域内呈现。
3-我还希望指令在按下时将逗号转换为点。
4- 新值必须以数字而不是点开始和结束。
5- 每个数组值只有一个点。
这是我的代码:
View/template:
<script type="text/ng-template" id="form_field_float">
<textarea only-digits class="form-control" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list=" " ng-trim="false" ng-change="dbo._isDirty = true"></textarea>
</script>
指令:
app.directive('onlyDigits', function () {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.unshift(function (inputValue) {
var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' ' || s == "."); }).join('');
console.log(inputValue);
ngModel.$viewValue = digits;
ngModel.$render();
return digits;
});
}
};
});
Ok replace() 指令中的正则表达式是最后的解决方案:
模板:
<script type="text/ng-template" id="form_field_float">
<textarea only-flo class="form-control" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list=" " ng-trim="false" ng-change="dbo._isDirty = true"></textarea>
</script>
指令:
app.directive('onlyFlo', function () {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.unshift(function (inputValue) {
//var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' ' || s == '.'); }).join('');
var digits= inputValue.replace(/\.{2,}/g, '.').replace(/e{2,}/gmi, 'e').replace(/[^0-9\.\n\r\-e]/gmi, '');
//var digits= inputValue.split(/\s/).filter(function(s){return isNaN(s) ? false : s}).join('\r');
console.log('dig: ' +digits);
console.log(inputValue);
ngModel.$viewValue = digits;
ngModel.$render();
return digits;
});
}
};
});
我有一个文本区域,它保存多个值作为数组存储在 ng-model 中。按回车键并插入新的有效字符(数字和点)后,将在数组中创建一个新值。
我正在尝试调整我在答案中找到的自定义指令。但是我还有以下问题:
1- 您仍然可以输入连续的点 as(34...5),这是不允许的。
2-如果同一个键被按下两次,直到按下一个新键,它才会被接受。因此,如果我按字符 "d" 两次,它就会在文本区域内呈现。
3-我还希望指令在按下时将逗号转换为点。
4- 新值必须以数字而不是点开始和结束。
5- 每个数组值只有一个点。
这是我的代码:
View/template:
<script type="text/ng-template" id="form_field_float">
<textarea only-digits class="form-control" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list=" " ng-trim="false" ng-change="dbo._isDirty = true"></textarea>
</script>
指令:
app.directive('onlyDigits', function () {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.unshift(function (inputValue) {
var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' ' || s == "."); }).join('');
console.log(inputValue);
ngModel.$viewValue = digits;
ngModel.$render();
return digits;
});
}
};
});
Ok replace() 指令中的正则表达式是最后的解决方案:
模板:
<script type="text/ng-template" id="form_field_float">
<textarea only-flo class="form-control" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list=" " ng-trim="false" ng-change="dbo._isDirty = true"></textarea>
</script>
指令:
app.directive('onlyFlo', function () {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.unshift(function (inputValue) {
//var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' ' || s == '.'); }).join('');
var digits= inputValue.replace(/\.{2,}/g, '.').replace(/e{2,}/gmi, 'e').replace(/[^0-9\.\n\r\-e]/gmi, '');
//var digits= inputValue.split(/\s/).filter(function(s){return isNaN(s) ? false : s}).join('\r');
console.log('dig: ' +digits);
console.log(inputValue);
ngModel.$viewValue = digits;
ngModel.$render();
return digits;
});
}
};
});