如何以角度将ng-model输入值显示为货币？答案

【问题标题】：How to display ng-model input value as currency in angular?如何以角度将ng-model输入值显示为货币？
【发布时间】：2014-01-11 10:40:47
【问题描述】：

我有 html

<input type="text" ng-model="price" >

<h2>{{ price | currency}}</h2>

在控制器中

$scope.price = 10;   
Which displays   **$10** in h1 if i change the value in price model input.

我希望文本框输入为货币（输入框中的 10 美元作为值）。如何做到这一点？

【问题讨论】：

抱歉我之前的回答，我没有正确阅读你的问题。请在下面尝试我的新答案演示。

标签： javascript jquery angularjs filter angularjs-directive

【解决方案1】：

您可以尝试使用formatters 和parsers 喜欢

app.directive('currency', function () {
    return {
        require: 'ngModel',
        link: function(elem, $scope, attrs, ngModel){
            ngModel.$formatters.push(function(val){
                return '$' + val
            });
            ngModel.$parsers.push(function(val){
                return val.replace(/^\$/, '')
            });
        }
    }
})

然后

<input type="text" ng-model="price" currency>

演示：Fiddle

【讨论】：

感谢您的回答。当页面加载时，解决方案工作正常。但是当我改变输入时它只有数字。我希望输入框在更改时有货币符号。
@bleedCoder 你检查过小提琴了吗……看起来不错
当价值被移除时，美元就消失了。知道为什么吗？
@j_walker_dev 这是因为正则表达式只替换第一个匹配的字符。尝试使用/[$,]/g。

【解决方案2】：

对于输入，我不使用ng-bind 或ng-model，我总是使用ng-value。

<input type="text" ng-value="variable | currency:'US$ '" />

【讨论】：

这适用于初始显示，但不会在编辑时重新格式化。
嗯，问题是：“如何将 ng-model 输入值显示为货币”，而不是“如何编辑输入并保留货币”。
是的，问题是“如何将 ng-model 输入值显示为货币”。人们询问输入值这一事实意味着他们希望在输入到文本框中的值上进行格式化。