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

Question

我的项目要求以货币格式显示金额字段.我可以实现此onblur事件,但请告诉我是否可以使用过滤器或其他一些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}}" />

但它只转换为我键入的第一个键,就像它将2转换为$ 2.00然后它清除了值(因为我猜它发现这个更新的值不是一个数字？)

更新:我能够使用自定义过滤器对其进行实时格式化,但该过滤器在所有情况下都无法正常工作,当我保存该值时,我得到的数量为$和逗号,而不仅仅是数值.我会尝试更多.

Answer 1

这是一个相当重要的问题.对于功能的主要部分,你需要使用ngModelController的$formatters和$parsers性质注册侦听器来处理的变化$modelValue,并$viewValue分别.

1. 当$modelValue修改,你需要使用对其进行过滤,currency过滤器上显示的视图之前.

2. 当$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;
    });
  }
};

另见这个简短的演示.这不是完美的,但这是一个好的开始.顺便说一句,我"借用"了get/setCaretPosition()AngularUI uiMask指令中的函数.

Answer 2

您还可以使用自动为您提供此功能的fcsa-number指令.就像将fcsa-number属性添加到input元素一样简单.

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

而这里是一个演示

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