AngularJS数字文本输入:指令与函数

AngularJS numeric text input: Directive vs. Function

本文关键字：指令 函数 输入 数字 文本 AngularJS      更新时间：2023-09-26

我的项目有一个包含大约 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

相关文章：