将货币过滤器应用于 angularjs 中的输入字段 [英] Apply currency filter to the input field in angularjs
本文介绍了将货币过滤器应用于 angularjs 中的输入字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我使用跨度标签时,我可以应用像
这样的钱过滤器<跨度>{{item.cost |货币}}</span>
我想知道如何在输入标签中应用相同的货币过滤器.即
<input type="text" ng-model="item.cost | 货币"/>
当我尝试将货币过滤器应用于上述输入字段时,它不起作用.请让我知道如何将货币过滤器应用于输入字段.谢谢
解决方案
我创建了一个简单的指令来处理格式化输入字段.这是一个 jsfiddle 示例.要使用它,请将其添加到您现有的代码中.
<input type="text" ng-model="item.cost" format="currency"/>
并将此指令添加到您的代码中.
//允许您格式化文本输入字段.//<input type="text" ng-model="test" format="number"/>//<input type="text" ng-model="test" format="currency"/>.directive('format', ['$filter', function ($filter) {返回 {要求:'?ngModel',链接:函数(范围,元素,属性,ctrl){如果(!ctrl)返回;ctrl.$formatters.unshift(function (a) {返回 $filter(attrs.format)(ctrl.$modelValue)});elem.bind('blur', function(event) {var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');elem.val($filter(attrs.format)(plainNumber));});}};}]);
Hi when I am using span tags I can apply the money filter like
<div ng-repeat="item in items">
<span>
{{item.cost | currency}}
</span>
</div>
I am wondering how I can apply same currency filter in input tag. i.e
<div ng-repeat="item in items">
<input type="text" ng-model="item.cost | currency" />
</div>
When I try to apply currency filter to the input field as above it doesnt work. Please let me know how to apply currency filter to input field. Thanks
解决方案
I created a simple directive that handles formatting input fields. Here is a jsfiddle example. To use it add this to your existing code.
<div ng-repeate="item in items">
<input type="text" ng-model="item.cost" format="currency" />
</div>
And add this directive to your code.
// allow you to format a text input field.
// <input type="text" ng-model="test" format="number" />
// <input type="text" ng-model="test" format="currency" />
.directive('format', ['$filter', function ($filter) {
return {
require: '?ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl) return;
ctrl.$formatters.unshift(function (a) {
return $filter(attrs.format)(ctrl.$modelValue)
});
elem.bind('blur', function(event) {
var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');
elem.val($filter(attrs.format)(plainNumber));
});
}
};
}]);
这篇关于将货币过滤器应用于 angularjs 中的输入字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文