javascript - 使用 NgModel 输入的 AngularJS 数字格式过滤器指令

Question

我想为输入控件创建一个指令，当输入没有焦点时，该指令将数字格式化为小数点后 X 位。当输入确实有焦点时，我希望数字显示为未格式化(无逗号)。

我几乎就在那里，使用以下代码。当您在输入内部单击时，文本会发生变化，而当您单击(模糊事件)时，文本格式会再次变化。但是，如果我更改输入中的值，则事件似乎会发生变化，而模糊事件什么也不做。然后，如果您再次单击输入框，值会在不应格式化时格式化，而模糊事件会在应格式化时取消格式化。

要使用指令你可以简单地做

<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