Question

我正在寻找一种格式化input元素以格式化货币的方法。具体而言，我希望数以千计的逗号。

最初的解决方案是只是格式化控制器中的值并将其返回到视图。但是，为了做我的计算，我必须再次剥离所有这些。然后我遇到了$formatters和$parsers ngModelController。基本上它允许您创建管道功能。第一种格式化用户的值。第二个解析要在控制器中使用的值。正是我想要的。

我的解决方案仅适用于页面加载。 Check out my fiddle

myApp.directive('thousandsformatter', function ($filter) {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$formatters.push(function (data) {
                var formatted = $filter('currency')(data);
                console.log(formatted);
                //convert data from model format to view format
                return formatted; //converted
            });
            ctrl.$parsers.push(function (data) {
                console.log(data);
                //convert data from view format to model format
                return data; //converted
            });
        }
    };
});

如何在用户输入时更新此内容？

Answer 1

我已经在解析功能中进行了调整，现在它的工作方式与你想要的一样。

myApp.directive('thousandsformatter', function ($filter) {
    var precision = 2;
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$formatters.push(function (data) {
                var formatted = $filter('currency')(data);
                console.log(formatted);
                //convert data from model format to view format
                return formatted; //converted
            });
            ctrl.$parsers.push(function (data) {
                var plainNumber = data.replace(/[^\d|\-+|\+]/g, '');
                var length = plainNumber.length;
                var intValue = plainNumber.substring(0,length-precision);
                var decimalValue = plainNumber.substring(length-precision,length)
                var plainNumberWithDecimal = intValue + '.' + decimalValue;
                //convert data from view format to model format
                var formatted = $filter('currency')(plainNumberWithDecimal);
                element.val(formatted);

                return Number(plainNumberWithDecimal);
            });
        }
    };
});

Check out my solution on fiddle

希望有所帮助。

干杯

格式化<input />以将货币显示为用户类型

1 个答案: