在AngularJS的輸入字段上應用數字過濾器

Question

我們如何在輸入字段上應用數字過濾器？我在非輸入字段上顯示效果很好。但是，當我在輸入字段上設置過濾器時，出現錯誤。

<input type="number" name="input" ng-model="value2 | number:2" 
      min="0" max="99" size="20"> 

Error: [ngModel:numfmt] http://errors.angularjs.org/1.3.8/ngModel/numfmt?p0=98.77 at Error (native) at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:6:416

下面是用於測試的普拉克。 number format

Answer 1

您不能將filter應用於ng-model。

具體詳細信息請參見這個答案（未標記爲的答案）： https://stackoverflow.com/a/14425022/1452497

簡短而親切：

...the intention of AngularJS inputs and the ngModel directive is that invalid input should never end up in the model. The model should be always valid.

考慮也該表達內的ng-model需求可以從解析器中分配。

ng-model="testA"最終分解爲：testA = some-input-value

這將無法正常工作：testA | number:2 = some-input-value

你應該使用formatter或parser這（在視圖之外）。

Answer 2

This error: 
Error: [ngModel:numfmt] http://errors.angularjs.org/1.3.5/ngModel/numfmt?p0=1 
check your model: don't using $scope.mymodel = '1'; 
to use $scope.mymodel = 1; 

該指令僅驗證輸入上的數字。

angularMainModule.directive('onlyNumbers', function() { 
    return function(scope, element, attrs) { 
     var keyCode = [8,9,37,39,48,49,50,51,52,53,54,55,56,57, 
        96,97,98,99,100,101,102,103,104,105,110]; 
     element.bind("keydown", function(event) { 
      if($.inArray(event.which,keyCode) == -1) { 
       scope.$apply(function(){ 
        scope.$eval(attrs.onlyNumbers); 
        event.preventDefault();`enter code here` 
       }); 
       event.preventDefault(); 
      } 
     }); 
    }; 
});