如何以角度顯示ng-model輸入值爲貨幣？

我在HTML中如何以角度顯示ng-model輸入值爲貨幣？

<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輸入框，值）。如何做到這一點？

來源

2013-12-23 bleedCoder

對不起，我以前的答案，我沒有正確地讀你的問題。請嘗試下面的新答案演示。 – Daiwei

您可以嘗試使用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

來源

2013-12-23 08:42:46

感謝您的回答。當頁面加載解決方案正常工作。但是當我改變輸入時，它只有數字。我希望輸入框在更改時具有貨幣符號。 – bleedCoder

@bleedCoder你檢查了小提琴......它看起來很好 –

當價值被刪除時，美元消失。任何想法爲什麼？ –

-3

對於輸入我不使用ng-bind或ng-model，我總是用ng-value代替。

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

來源

2015-11-17 18:06:29 MarceloBarbosa

這適用於初始顯示，但不會重新編輯。 –

嗯，問題是：「如何將ng-model輸入值顯示爲貨幣」，而不是「如何編輯輸入並保留貨幣」。 – MarceloBarbosa

是的，問題是「如何將ng-model **輸入值**顯示爲貨幣」。該人詢問輸入值的事實意味着他們希望格式化發生在輸入到文本框中的值上。 –

如何以角度顯示ng-model輸入值爲貨幣？

回答

相關問題