AngularJS - 如何在我输入时在文本框上应用货币过滤器? [英] AngularJS - How to apply currency filter on textbox as I type?

问题描述

我的项目要求以货币格式显示金额字段.我可以实现这个 onblur 事件，但请告诉我是否可以使用过滤器或其他一些 AngularJS 技术来实现.

My project has a requirement to show amount field in currency format. I can achieve this onblur event, but let me know if this can be achieved using filters or some other AngularJS technique.

我有以下文本框:

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

我想将此文本框中的值转换为遵循货币格式.所以，如果我输入 200000，它应该是 $200,000.00 在我输入时或在我输入时.

I want to convert the value inside this text box to follow currency format. So, if I type 200000, it should make is $200,000.00 as soon as I type or while I am typing.

我使用了以下技术并应用了过滤器，

I used the following technique and applied a filter,

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

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

but it only converts for the first key I type, like it converts 2 to $2.00 and then it clears the value (as I guess it finds this updated value as not a number?)

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

Update: I am able to format it live using a custom filter, but that filter is not working properly in all the cases and when I save the value, I am getting values with $ and commas in the amount and not just the numeric value. I will try more.

推荐答案

这是一个相当重要的问题.对于功能的主要部分，您需要使用 ngModelController 的 $formatters 和 $parsers 属性来注册监听器来处理 $modelValue 和 $viewValue 分别.

It is a rather non-trivial problem. For the main part of the functionality, you need to use ngModelController's $formatters and $parsers properties to register listeners to handle the changes in $modelValue and $viewValue respectively.

1. 当$modelValue发生变化时，您需要使用currency过滤器对其进行过滤，然后再将其显示到视图中.

1. When the $modelValue changes, you need to filter it using the currency filter before displaying it to the view.

当 $viewValue 发生变化时，需要将其转换为数字(我认为将模型值存储为数字更有意义，而不是格式化的字符串)，过滤该数字通过 currency 过滤器并更新 $viewValue(如有必要).

When the $viewValue changes, you need to convert it to a number (I thought it makes more sense to store the model value as number, not as a formatted string), filter that number through the currency filter and update the $viewValue (if necessary).

这不是特别困难.棘手的部分是更新元素的值，将光标移动到末尾，因此您需要手动重新定位插入符号.

That is not particularly difficult. The tricky part is that updating the element's value, moves the cursor at the end, so you need to manually re-position the caret.

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

My attempt resulted in the following Directive Definition Object

{
  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;
    });
  }
};

另请参阅此简短演示.这并不完美，但这是一个好的开始.顺便说一句，我从 AngularUI 的 get/setCaretPosition() 函数modules/mask/mask.js" rel="nofollow">uiMask 指令.

See, also, this short demo. It's not perfect, but it's a good start. BTW, I "borrowed" the get/setCaretPosition() functions from AngularUI's uiMask directive.

这篇关于AngularJS - 如何在我输入时在文本框上应用货币过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！