我的项目要求以货币格式显示金额字段.我可以实现这个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然后它清除了值(因为我猜它发现这个更新的值不是一个数字？)
更新：我能够使用自定义过滤器对其进行实时格式化,但该过滤器在所有情况下都无法正常工作,当我保存该值时,我得到的数量为$和逗号,而不仅仅是数值.我会尝试更多.
解决方法
这是一个相当重要的问题.
对于功能的主要部分,您需要使用
对于功能的主要部分,您需要使用
ngModelController的$formatters和$parsers属性来注册侦听器以分别处理$modelValue和$viewValue中的更改.
>当$modelValue更改时,您需要使用货币过滤器对其进行过滤,然后再将其显示到视图中.
>当$viewValue更改时,您需要将其转换为数字(我认为将模型值存储为数字更有意义,而不是格式化字符串),通过货币过滤器过滤该数字并更新$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()函数.
