我的项目要求以货币格式显示金额字段。我可以实现此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然后它清除了值（因为我猜它发现这个更新的值不是数字？）
更新：我可以使用自定义过滤器对其进行实时格式化，但是在所有情况下该过滤器都无法正常工作，当我保存该值时，我会获得金额为$和逗号的值而不仅仅是数值。我会尝试更多。
答案 0 :(得分：9)
这是一个非常重要的问题。
对于功能的主要部分，您需要使用 ngModelController 的$formatters和$parsers属性来注册侦听器以处理{{1}中的更改分别和$modelValue。
当$viewValue发生变化时，您需要先使用$modelValue过滤器对其进行过滤，然后再将其显示到视图中。
当currency更改时，您需要将其转换为数字（我认为将模型值存储为数字更有意义，而不是格式化字符串），通过$viewValue过滤并更新currency（如有必要）。
这并不是特别困难。棘手的部分是更新元素的值，将光标移动到最后，因此您需要手动重新定位插入符号。
我的尝试产生了以下指令定义对象
$viewValue另请参阅此 short demo 。这不是完美的，但这是一个好的开始。
顺便说一下，我“借用”了AngularUI的 uiMask 指令中的{
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;
});
}
};
函数。
答案 1 :(得分：5)
您还可以使用自动为您提供此功能的fcsa-number指令。它就像在输入元素中添加fcsa-number属性一样简单。
<input type="text" fcsa-number />
源代码和文档可在GitHub上找到：https://github.com/FCSAmericaDev/angular-fcsa-number
答案 2 :(得分：3)
尝试构建自定义货币指令时遇到同样的问题。因此，在检查了许多解决方法后，我找到了angular-input-masks指令。
支持bower进行快速安装，并且只需在输入文本元素上添加ui-money-mask属性：
<input type="text" ng-model="money" ui-money-mask>
还支持最小值和最大值验证。