Angular,输入字段,带有货币掩码指令,用于货币格式

Question

我正在尝试使用http://jquerypriceformat.com/为欧盟货币领域创建输入掩码

到目前为止,在我的指令中,输入正确显示给应用了掩码的用户,但我认为有些错误,因为POST值是以奇怪的格式发送的,与我们在输入字段中看到的完全不同.

我包括priceformat.js

<script src="js/jquery.price_format.1.8.min.js"></script>

<input type="text" currency-input ng-model...>

角上:

app.directive('currencyInput', function() {
    return {
      require: '?ngModel',
      link: function($scope, element, attrs, controller) {
        element.priceFormat({
            prefix: '',
            centsSeparator: ',',
            thousandsSeparator: '.'
        });
      }
    };
});

我的输入正确显示了掩码的值,但是在POST数据(由angular调用)时,它是一个不同的值,我错过了什么？

输入> 2.200,80 | 发表> 22,0080

谢谢

Answer 1

从你的例子中我看不到链接返回的东西.

我会写一些指令:

.directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;


            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue)
            });


            ctrl.$parsers.unshift(function (viewValue) {

          elem.priceFormat({
            prefix: '',
            centsSeparator: ',',
            thousandsSeparator: '.'
        });                

                return elem[0].value;
            });
        }
    };
}]);

演示1 Fiddle

如果您想启动过滤器,请使用$formatters:

现在link是:

link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            var format = {
                    prefix: '',
                    centsSeparator: ',',
                    thousandsSeparator: ''
                };

            ctrl.$parsers.unshift(function (value) {
                elem.priceFormat(format);

                return elem[0].value;
            });

            ctrl.$formatters.unshift(function (value) {
                elem[0].value = ctrl.$modelValue * 100 ;
                elem.priceFormat(format);
                return elem[0].value;
            })
        }

演示2 Fiddle

Answer 2

将a推$parser送到控制器,仅在与使用$setViewValue()和的输入不匹配时更新值$render().

app.directive('currencyInput', function() {
    return {
      require: '?ngModel',
      link: function($scope, element, attrs, controller) {
        return ctrl.$parsers.push(function(inputValue) {

            ...

            if (result != inputValue) {
                controller.$setViewValue(res);
                controller.$render();
            }
        });
      }
    };
});

这是我用于货币输入指令的逻辑的小提琴:小提琴