将货币过滤器应用于angularjs的输入字段

一尘不染

将货币过滤器应用于angularjs的输入字段

angularjs

嗨，当我使用跨度标签时，我可以应用货币过滤器，例如

<div ng-repeat="item in items">
    <span>
        {{item.cost | currency}}
    </span>
</div>

我想知道如何在输入代码中应用相同的货币过滤器。即

<div ng-repeat="item in items">
    <input type="text"  ng-model="item.cost | currency" />
</div>

当我尝试将货币过滤器应用于上述输入字段时，它不起作用。请让我知道如何将货币过滤器应用于输入字段。谢谢

阅读 232

2020-07-04

共1个答案

一尘不染

我创建了一个简单的指令来处理格式化输入字段。这是一个jsfiddle示例。要使用它，请将其添加到现有代码中。

<div ng-repeate="item in items">
    <input type="text"  ng-model="item.cost" format="currency" />
</div>

并将此指令添加到您的代码中。

// 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));
            });
        }
    };
}]);

2020-07-04