我是angularjs的新人。我想知道什么是只允许一个有效的数字键入到文本框的方式。
例如，用户可以键入“1.25”，但不能键入“1.a”或“1 ..”。当用户尝试键入下一个字符将使其成为无效的数字时，他无法键入。
例如，用户可以键入“1.25”，但不能键入“1.a”或“1 ..”。当用户尝试键入下一个字符将使其成为无效的数字时，他无法键入。
提前致谢。
您可以尝试此伪指令来阻止任何无效字符输入到输入字段。 (更新：这依赖于指令具有对模型的显式知识，这对于可重用性不是理想的，见下面的可重用示例)
原文链接：/angularjs/146687.htmlapp.directive('isNumber',function () {
return {
require: 'ngModel',link: function (scope) {
scope.$watch('wks.number',function(newValue,oldValue) {
var arr = String(newValue).split("");
if (arr.length === 0) return;
if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return;
if (arr.length === 2 && newValue === '-.') return;
if (isNaN(newValue)) {
scope.wks.number = oldValue;
}
});
}
};
});
它也解释了这些情况：
>从非空有效字符串转换为空字符串
>负值
>负十进制值
我在这里创建了一个jsFiddle，这样你可以看到它是如何工作的。
更新
以下Adam Thomas的反馈，不包括直接在指令内的模型引用(我也认为是最好的方法)，我更新了我的jsFiddle提供一个不依赖于这一点的方法。
该指令利用局部范围与父范围的双向绑定。对指令中的变量所做的更改将反映在父作用域中，反之亦然。
HTML：
<form ng-app="myapp" name="myform" novalidate>
<div ng-controller="Ctrl">
<number-only-input input-value="wks.number" input-name="wks.name"/>
</div>
</form>
角码：
var app = angular.module('myapp',[]);
app.controller('Ctrl',function($scope) {
$scope.wks = {number: 1,name: 'testing'};
});
app.directive('numberOnlyInput',function () {
return {
restrict: 'EA',template: '<input name="{{inputName}}" ng-model="inputValue" />',scope: {
inputValue: '=',inputName: '='
},link: function (scope) {
scope.$watch('inputValue',oldValue) {
var arr = String(newValue).split("");
if (arr.length === 0) return;
if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return;
if (arr.length === 2 && newValue === '-.') return;
if (isNaN(newValue)) {
scope.inputValue = oldValue;
}
});
}
};
});
