我是angularjs的新手。我想知道什么是只允许在文本框中键入有效数字的方法。例如,用户可以键入“ 1.25”,但不能键入“ 1.a”或“ 1 ..”。当用户尝试输入下一个将使它成为无效数字的字符时,他将无法输入。
提前致谢。
您可以尝试使用此指令来阻止将任何无效字符输入到输入字段中。( 更新 :这依赖于对模型具有明确知识的指令,这对于可重用性而言并不理想,请参见下面的可重用示例)
app.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', 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.inputValue = oldValue; } }); } }; });