我的项目有一个包含大约 16 个文本字段的表单。 输入需要为数字,不同的字段将具有不同的最小值/最大值。 我能够找到以下 jsfiddle (http://jsfiddle.net/thomporter/DwKZh/) 并将解析调整为以下内容 (http://jsfiddle.net/WdBju/):
angular.module('myApp', []).directive('numbersOnly', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
if (inputValue == undefined) {
return '';
}
var firstParse = inputValue.replace(/[^0-9 . -]/g, '');
var safeParse = firstParse.charAt(0);
var prepParse = firstParse.substring(1,firstParse.length);
var secondParse = safeParse + prepParse.replace(/[^0-9 .]/g, '');
var n = secondParse.indexOf(".");
var transformedInput;
if (n == -1) {
transformedInput = secondParse;
}
else {
safeParse = secondParse.substring(0,n+1);
firstParse = (secondParse.substring(n+1,secondParse.length)).replace(/[^0-9]/g, '');
n = 2;
if (firstParse.length <= n) {
transformedInput = safeParse + firstParse;
}
else {
transformedInput = safeParse + firstParse.substring(0,n);
}
}
var min = -25;
var max = 25;
if (transformedInput!=inputValue ||
transformedInput < min ||
transformedInput > max) {
var returnValue;
if (transformedInput < min || transformedInput > max) {
returnValue = transformedInput.substring(0,transformedInput.length-1);
}
else {
returnValue=transformedInput;
}
modelCtrl.$setViewValue(returnValue);
modelCtrl.$render();
}
return returnValue;
});
}
};
});
我对解析感到满意,但最小/最大和精度值是硬编码的。 我应该将其保留为指令并传递变量吗? 还是函数更合适?
我会保持原样并添加自定义属性以传入最小值和最大值:
<div ng-controller="Numeric">
<br />
<input type="text" ng-model="number" required="required" class="numbers-only" minvalue="-27" maxvalue="45" />
</div>
在您的指令中(当然您应该进行一些健全性检查和合理的默认值):
var min = parseInt(attrs.minvalue);
var max = parseInt(attrs.maxvalue);
我已经分叉了你的小提琴并在这里进行了更改:http://jsfiddle.net/XaqSs/
一个可能的选择是完全避开自定义指令并使用输入 type=number 属性。
<input type="number" min="5" max="18" step="0.5" value="9" name="shoe-size">
更多关于它的信息在这里: http://html5doctor.com/html5-forms-input-types/
不过,并非所有浏览器都支持它,Firefox 在支持方面尤其滞后:http://caniuse.com/#search=number