AngularJS - 如何在输入文本框时应用货币过滤器？

我的项目有要求以货币格式显示金额字段。我可以实现这个onblur事件，但让我知道这是否可以使用滤波器或其他AngularJS技术来实现。AngularJS - 如何在输入文本框时应用货币过滤器？

我有以下文本框：

<input type="text" class="form-control" id="MyAmount" name="MyAmount" ng-model="MyAmount" />

我想转换值这个文本框内按照货币格式。所以，如果我输入200000，那么只要输入或输入时应该是$ 200,000.00。

我使用以下技术和应用的滤波器，

<input type="text" class="form-control" id="MyAmount" name="MyAmount" ng-model="MyAmount" 
          value="{{MyAmount | currency}}" />

但它仅转换为第一密钥I型，等将其转换为2〜$ 2.00然后它清除值（我想找到这个更新的值不是一个数字？）

更新：我能够使用自定义过滤器实时格式化它，但该过滤器在所有情况下都无法正常工作，并且当我保存该值时， $和逗号的数量，而不仅仅是数值。我会尝试更多。

来源

2014-05-21 Pawan Pillai

这是一个相当不平凡的问题。有关的功能的主要部分，你需要使用ngModelController的$formatters和$parsers性质注册听众分别来处理$modelValue和$viewValue的变化。

当$modelValue变化，则需要使用currency过滤器上显示的视图之前对其进行过滤。
当$viewValue变化，你需要将其转换为数字（我认为这更有意义的模型值存储为数字而不是一个格式化字符串），过滤通过currency过滤器数量和更新$viewValue（如有必要）。

这并不特别困难。棘手的部分是更新元素的值，最后移动光标，因此您需要手动重新定位插入符号。

我尝试导致以下指令定义对象

{ 
    restrict: 'A', 
    require: 'ngModel', 
    link: function postLink(scope, elem, attrs, modelCtrl) {  
    modelCtrl.$formatters.push(filterFunc); 
    modelCtrl.$parsers.push(function (newViewValue) { 
     var newModelValue = toNumber(newViewValue); 
     modelCtrl.$viewValue = filterFunc(newModelValue); 
     var pos = getCaretPosition(elem[0]); 
     elem.val(modelCtrl.$viewValue); 
     var newPos = pos + modelCtrl.$viewValue.length - 
         newViewValue.length; 
     setCaretPosition(elem[0], newPos); 
     return newModelValue; 
    }); 
    } 
};

还参见本short demo。这并不完美，但这是一个好的开始。顺便说一下，我从AngularUI的uiMask指令中“借用”了get/setCaretPosition()函数。

来源

2014-05-21 14:16:02 gkalpak

现在感谢我对我应该做什么有更好的理解。我会尝试你的解决方案。但演示只是采取单个数字值，如$ 2.00等我必须手动移动光标前的小数点，然后再次键入输入更多的数字。请看一看。我正在使用最新版本的Chrome。 –

我不明白你的意思。我可以输入任何数字（例如：'$ 2,123.00'，我把光标放在小数点分隔符前面并输入'2'，'1'，'2'，'3'）。你到底什么意思？（我也在Windows上使用最新版本的Chrome。） – gkalpak

是的，如果将光标放在小数点分隔符之前，它可以很好地工作。但我的文本框最初会是空白的，我将从空白处开始输入。在你的演示中，我可以从空白值开始吗？谢谢。 –

您也可以使用fcsa-number指令自动为您提供此指令。这与将fcsa-number属性添加到输入元素一样简单。

<input type="text" fcsa-number />

而且here is a demo

的源代码和文档可在GitHub上：https://github.com/FCSAmericaDev/angular-fcsa-number

来源

2014-07-03 13:07:55 Paul

我有同样的问题时，试图建立一个自定义货币指令。所以，在检查了很多方法解决之后，我找到了angular-input-masks指令。用于快速安装

支持闺房，然后使用只需要添加一个输入文本元素的UI钱面罩属性：

<input type="text" ng-model="money" ui-money-mask>

也支持最小值和最大值的验证。

来源

2015-05-22 14:48:44 allucardster

只有角度输入掩码的问题是它不会自动调整光标，也不支持设置动态$语言环境。 –

AngularJS - 如何在输入文本框时应用货币过滤器？

回答

相关问题