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分别。

当$modelValue更改，您需要使用 currency 过滤它在将其显示到 View 之前进行过滤。

当$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 .这并不完美，但这是一个好的开始。
顺便说一句，我“借用”了 get/setCaretPosition()来自 AngularUI 的函数 uiMask 指示。