Javascript 格式<；输入>；将货币显示为用户类型的步骤

我正在寻找一种方法来格式化

输入

元素以格式化货币。具体来说，我希望在那里有数千个逗号

最初的解决方案是在控制器中格式化值并将其返回到视图。但为了进行计算，我必须再次去掉所有这些。然后我遇到了

ngModelController

的

$formatters

和

$parsers

。本质上，它允许您创建管道函数。第一个为用户设置值的格式。第二个解析要在控制器中使用的值。正是我想要的

但我的解决方案仅适用于页面加载

---

如何才能在用户键入时更新此内容？

我已对解析函数进行了调整，现在它可以按照您的要求运行

myApp.directive('thousandsformatter', function ($filter) {
    var precision = 2;
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$formatters.push(function (data) {
                var formatted = $filter('currency')(data);
                console.log(formatted);
                //convert data from model format to view format
                return formatted; //converted
            });
            ctrl.$parsers.push(function (data) {
                var plainNumber = data.replace(/[^\d|\-+|\+]/g, '');
                var length = plainNumber.length;
                var intValue = plainNumber.substring(0,length-precision);
                var decimalValue = plainNumber.substring(length-precision,length)
                var plainNumberWithDecimal = intValue + '.' + decimalValue;
                //convert data from view format to model format
                var formatted = $filter('currency')(plainNumberWithDecimal);
                element.val(formatted);

                return Number(plainNumberWithDecimal);
            });
        }
    };
});

希望能有所帮助

---

干杯

您可能想看看这个界面。我认为他们有一个输入“掩码”指令。你需要一个过滤器，特别是数字1已经完成了逗号和小数点的截断，所以这是一个很好的开始。啊，实际上也有一种货币，你如何在输入元素上使用过滤器？我知道如何在范围绑定{{}@TimWithers中完成这项工作，这看起来是个不错的选择。有货币面具吗？他们网站上的演示没有显示。这是我最好的尝试。我觉得这个想法太有侵略性了，我不希望在键入时字段不断更新（移动逗号）。我认为这对于字段大小固定的掩码是有意义的，但我认为最好将其保留为

input type=“number”

并在附近的

span

中显示格式化结果。

myApp.directive('thousandsformatter', function ($filter) {
    var precision = 2;
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$formatters.push(function (data) {
                var formatted = $filter('currency')(data);
                console.log(formatted);
                //convert data from model format to view format
                return formatted; //converted
            });
            ctrl.$parsers.push(function (data) {
                var plainNumber = data.replace(/[^\d|\-+|\+]/g, '');
                var length = plainNumber.length;
                var intValue = plainNumber.substring(0,length-precision);
                var decimalValue = plainNumber.substring(length-precision,length)
                var plainNumberWithDecimal = intValue + '.' + decimalValue;
                //convert data from view format to model format
                var formatted = $filter('currency')(plainNumberWithDecimal);
                element.val(formatted);

                return Number(plainNumberWithDecimal);
            });
        }
    };
});