在AngularJS中的输入字段上应用数字过滤器答案

【问题标题】：Apply number filter on input field in AngularJS在AngularJS中的输入字段上应用数字过滤器
【发布时间】：2015-03-03 10:29:12
【问题描述】：

我们如何在输入字段上应用数字过滤器？我在非输入字段上显示效果很好。但是，当我在输入字段上设置过滤器时出现错误。

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

错误：[ngModel:numfmt] http://errors.angularjs.org/1.3.8/ngModel/numfmt?p0=98.77 在错误（本机）在http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:6:416

这是一个用于测试的 plunk。 number format

【问题讨论】：

您不能在ng-model 上应用过滤器@ ng-model 需要是可以分配给的范围上的属性

标签： javascript angularjs

【解决方案1】：

您不能将filter 应用到ng-model。

具体请参阅此答案（未标记为 the 答案）以获取更多信息： https://stackoverflow.com/a/14425022/1452497

又短又甜：

...AngularJS 输入和 ngModel 的意图指令是无效输入不应该出现在模型中。这模型应该始终有效。

还要考虑ng-model 内部的表达式 需要从解析器赋值。

ng-model="testA" 最终分解为：testA = some-input-value

这不能作为：testA | number:2 = some-input-value

您应该为此使用formatter 或parser（在视图之外）。

【讨论】：

【解决方案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();
            }
        });
    };
});

【讨论】：