1

私のプロジェクトには、約 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;           
       });  
     }  
   };  
});

解析には満足していますが、最小/最大値と精度の値がハードコードされています。これをディレクティブとして残し、変数を渡す必要がありますか? それとも関数の方が適切でしょうか?

4

2 に答える 2

2

そのままにして、カスタム属性を追加して最小値と最大値を渡します。

<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/

于 2013-10-01T19:22:04.837 に答える