通过指令将数字转换为货币答案

【问题标题】：Convert number to currency through directive通过指令将数字转换为货币
【发布时间】：2014-11-20 20:33:53
【问题描述】：

我正在尝试将数字转换为货币假设如果用户在文本框中输入 5，我想像 $5.00 一样自动更正它，因为我正在尝试编写指令，但不知道如何让它作为第一次使用指令工作。

(function () {

'use strict';

angular.module('commonModule')
    .directive('srCurreny', function (utilSvc) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, model) {

                element.bind('blur', function (event) {

                    var val = element.val();

                    if (!utilSvc.isEmptyOrUndefined(val)) {

                        var transform = currency + " " + val.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                        model.$setViewValue(element.val(transform));

                        scope.$apply();
                    }
                });
            }
        };
    });

})();

【问题讨论】：

过滤器通常最适合简单的文本操作，它甚至存在angular filter for currency
但我想在用户移动到下一个字段后立即更改它。

标签： angularjs angularjs-directive

【解决方案1】：

首先在Controller中设置amount。

angular.module('commonModule')
    .controller('aController', ['$scope', function (scope) {
        scope.amount = 5;
    }])
    .directive('srCurrency', ['$filter', function ($filter) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, el, attrs, ngModel) {

                function onChangeCurrency () {
                    ngModel.$setViewValue($filter('currency')(ngModel.$viewValue, '$'));
                    ngModel.$render();
                }

                el.on('blur', function (e) {
                    scope.$apply(onChangeCurrency);
                });
        }
    }
}]);

HTML

<div ng-app='app' ng-controller="aController">
    <input type="text" sr-currency ng-model='amount' />
</div>

JSFIDDLE

【讨论】：

非常感谢，这就是我要找的东西

【解决方案2】：

我建议使用 Angular 的内置货币过滤器，或者，如果这不能满足您的需求，您可以创建自己的。

https://docs.angularjs.org/api/ng/filter/currency

【讨论】：