2013-07-03 6 views
6

テキストボックスから数字を追加して別のテキストボックスに配置するときに問題があります。私の状況はこのようなものです:AngularJSテキストボックスの式の中に数値を追加する方法は?

私は1つのテキストボックスがあります。

<input type="text" ng-model="num1" /> 

を、入力がこのテキストボックスには何でも、これはこのような別のテキストボックスの値になります。

<input type="text" value="{{ num1 + 1 }}" /> 

このセットアップは正常に表示されますが、エラーが発生します。最初に2013と入力すると、2014の代わりに20131が2番目に表示されます。 私も、このようにフィルタを使用してみました:

<input type="text" value="{{ num1 + 1 | number}}" /> 

が、残念ながら、それは動作しません。私は何を取りこぼしたか?

答えて

13

テキストボックスの値は文字列です。 小数点がある場合は、parseIntまたはparseFloatを使用して整数/浮動小数点数に変換する必要があります。デフォルトでは、あなたの式の中で利用できるのparseIntメソッドを持っていないが、あなたはそれを利用できるように、あなたのコントローラでスコープに追加することができます

$scope.parseInt = parseInt; 


<input type="text" value="{{ parseInt(num1) + 1 }}" /> 

あなたはsee this in action here

+0

申し訳ありません..それはちょうど '1'を出力動作しませんを解決することができました。 parseInt()は何も返しませんでした... – Melvin

+0

ええ、私はちょうどそれに気付き、答えを更新しました。 –

+0

ありがとう@derek ...これは.. .. – Melvin

0

NUM1があると解釈されていることができます文字列。

使用、それを初期化するとき数にこれを変換するのparseInt()またはparseDouble()

5

テキストの代わりにinput type = numberを使用することもできます。これには、期待するものと一致するタイプを提供するという利点もあります。

+0

'select'要素でこれを行うことができたらうれしいです。 – pspahn

0

私は解決すべきダニ法を見つけました。私の場合は、item.qtyのようなものをparseIntする必要があるということです。しかし、私は<div ng-click="item.qty = parseInt(item.qty) + 1>Add</div>が動作しませんが見つかりました。

は最後に、私はこの方法が

<div ng-click = "item.qty = item.qty - 1 + 2">Add</div> 
関連する問題