当前位置: 首页 > 面试题库 >

带有货币掩码指令的角度输入字段,用于即时生成货币格式

廖鸿达
2023-03-14
问题内容

我正在尝试使用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, 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](http://jsfiddle.net/SAWsA/741/)

在此处输入图片说明

如果您想启动过滤器,请使用$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](http://jsfiddle.net/SAWsA/1218/)



 类似资料:
  • 我试过... 但那就不允许便士条目了。 我想要增量按钮控制在英镑上升,但仍然想要输入便士的能力。 谢谢,1DMF

  • 问题内容: 我正在使用我给定的语言环境获取自定义货币格式。但是,这始终包含我不需要的货币符号,我只想要给定语言环境的正确货币数字格式而没有货币符号。 做一个抛出一个异常.. 问题答案: 以下作品。这有点丑陋,但可以履行合同: 您还可以从货币格式中获取模式,删除货币符号,然后从新模式中重构新格式:

  • 我正在尝试使用函数。 而它应该打印$符号或美元? 我使用linux主机。 谢谢

  • 问题内容: 我想在开始时有一个文本输入字段,其中包含“ $”符号,无论对该字段进行什么编辑,以使该符号保持不变。 如果只接受数字作为输入,我会很好,但这只是一个幻想。 问题答案: 考虑使用无边界输入字段周围带有边框的跨度来模拟具有固定前缀或后缀的输入字段。这是一个基本的启动示例:

  • 问题内容: 嗨,当我使用跨度标签时,我可以应用货币过滤器,例如 我想知道如何在输入代码中应用相同的货币过滤器。即 当我尝试将货币过滤器应用于上述输入字段时,它不起作用。请让我知道如何将货币过滤器应用于输入字段。谢谢 问题答案: 我创建了一个简单的指令来处理格式化输入字段。这是一个jsfiddle示例。要使用它,请将其添加到现有代码中。 并将此指令添加到您的代码中。

  • 我创建了一个货币指令,我将在每个需要货币格式的输入元素中使用它。 所以我有两个主机听众,一个是OnFocus,第二个是Blur 而且效果很好。但当我通过绑定设置输入值时,我需要格式化输入值 所以当我打开一个模态时,我得到了无格式的值...NgOnInit不起作用,因为它早期加注太多 这是我的指令代码。 我的解决方案是在ngOnInit中设置一个时间间隔... 有没有人知道我可以使用哪个主机接收器,