Question

我想为输入控件创建一个指令，当输入没有焦点时，该指令格式化具有X个小数位的数字。当输入确实有焦点时，我希望数字看起来没有格式化（没有逗号）。

我几乎在那里，使用以下代码。当您在输入内部单击时，文本会更改，当您单击（模糊事件）时，文本会再次格式化。但是，如果我更改输入中的值，则事件似乎会改变，而blur事件不执行任何操作。然后，如果再次单击输入框，则值格式化时应该格式化，并且模糊事件无格式化，应格式化。

要使用该指令，您只需执行

即可

<input number-format ng-model="myValue" decimals="numberOfDecimals" />

这是指令

App.directive('numberFormat', ['$filter', '$parse', function ($filter, $parse) {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelController) {
            var decimals = $parse(attrs.decimals)(scope);

            ngModelController.$parsers.push(function (data) {
                //convert data from view format to model format
                return $filter('number')(data, decimals); //converted
            });

            ngModelController.$formatters.push(function (data) {
                //convert data from model format to view format
                return $filter('number')(data, decimals); //converted
            });

            element.bind('focus', function () {
                element.val(ngModelController.$modelValue);
            });

            element.bind('blur', function () {
                element.val(ngModelController.$viewValue);
            });
        }
    }
}]);

Answer 1

问题中的讨论似乎有助于OP。

$parsers导致用户指定的输入值作为过滤器编号格式存储到模型值中。例如，如果输入123456，则基础模型值将设置为123,456。这里的要点是模型值应该存储原始用户输入，而不是应用格式化后的用户输入。解析$parsers用户输入的简单实现是使用parseFloat()，如下所示：

ngModelController.$parsers.push(function (data) {
    return parseFloat(data);
});

为了安全起见，应该改进此解析功能以适应不良用户输入。我在演示的Plunker中提供了一个基本的例子。

在模糊时，输入字段中的值应设置为模型值的过滤版本。

DEMO

AngularJS数字格式过滤器指令，用于使用NgModel进行输入

1 个答案: