2013-12-23 12 views
7

私は、HTMLのコントローラng-modelの入力値を通貨として表示するにはどうすればいいですか?

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

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

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

を抱えている私は、テキストボックスの入力が(値として入力ボックスに$ 10)との通貨になりたいです。 これを達成するには?

+0

私の以前の回答について申し訳ありませんが、あなたは正しく質問されませんでした。下記の新しい回答のデモをお試しください。 – Daiwei

答えて

15

あなたはその後、

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

デモ

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(/^\$/, '') 
      }); 
     } 
    } 
}) 

ようformattersparsersを使用して試すことができます:私はいつもの代わりにng-valueを使用し、入力のためにFiddle

+1

答えをありがとう。ページが読み込まれると、ソリューションは正常に動作します。しかし、私は入力を変更すると、それは単に番号を持っています。私は、入力ボックスに変更するときに通貨記号を持っています。 – bleedCoder

+0

@ bleedCoderあなたはフィドルをチェックしましたか?それはうまく見えます –

+2

値が削除されるとドルが消えます。どんな考え? –

-3

私はng-bindまたはng-modelを使用していません。

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

これは最初の表示では機能しますが、編集時には再フォーマットされません。 –

+0

さて、質問は、「入力を編集して通貨を維持する方法」ではなく、「モデルの入力値を通貨として表示する方法」です。 – MarceloBarbosa

+0

はい、質問は「ng-model **入力値**を通貨として表示する方法」です。人が入力値を尋ねているという事実は、テキストボックスに入力された値に対して書式設定が行われることを意味します。 –