angularjs – 角度,输入字段与货币格式的货币蒙版指令

发布时间：2020-12-17 08:23:23 所属栏目：安全来源：网络整理

导读：我正在尝试使用 http://jquerypriceformat.com/为欧盟货币区域创建输入掩码到目前为止，在我的指令中，输入正确地显示给使用了掩码的用户，但我相信有一些错误，因为POST值正在以奇怪的格式发送，完全不同于输入字段中看到的。我包括priceformat.js script

我正在尝试使用 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数据(以角度调用)中，它是一个不同的值，我缺少什么？

输入> 2.200,80 |帖子> 22,0080

谢谢

从你的例子我看不到这个链接返回的东西。

我会写指令如下：

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


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


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

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

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

演示1 Fiddle

如果你想在启动过滤器时，使用$ formatters：

现在链接是：

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

            var format = {
                    prefix: '',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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!