Angular JS - 合計値の代わりに連結されています

Question

AngularJSの新機能です。わかりやすいフォームを作成しました。私は2つの入力値を乗算しようとしましたが、ここではうまくいきますが、同じコードを使用して2つの入力値を合計すると、合計ではなく連結されています。

マイコード：

<div ng-app ng-init="fval = 1;sval = 2"> 
<div> 
    First Value: 
</div> 
<div> 
    <input type="text" ng-model="fval" /> 
</div> 
<br /> 
<div> 
    Second Value: 
</div> 
<div> 
    <input type="text" ng-model="sval" /> 
</div> 
<br /> 
<div> 
    <label id="lblResult">{{fval * sval}}</label> 
</div> 

ここで私は私の入力のハードコードされた値を与えている私たちは、入力を変更した場合6.また、我々は2を掛けるために、正しい結果を得るように、最初に我々は結果を取得します値。

私は以下のようにaddtionのための私のコードを変更：

<label id="lblResult">{{fval + sval}}</label> 

をアプリケーションを実行した後、私はとして正しい値を得たが、私は私の入力値を変更したときに、私は連結された値を取得しています。 私のテキストボックスの値を変更した場合、firstTextBox = 12の場合& secondTextBox = 3の場合、結果値は '123'になります。

私はアプリケーションを初めて実行すると正しい値で着陸しますが、クライアント側の入力を変更すると連結します。

私の母国語ではないので、私の英語のために申し訳ありません。私が間違っているところで誰でも助けてくれますか？

Answer 1

は、これは単なるJavaScriptのものである

<input type="number" ng-model="fval" /> 

Answer 2

に

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

を変更してみてください。あなたの数字は文字列で、+は連結演算子です。これを解決する1つの方法：

parseInt(fval) + parseInt(sval) 

編集：これは角度式では許可されません（下記参照）。回答は '普通の' JSコードでも有効です。

Answer 3

これは、ng-modelのタイプがテキストとして宣言されているために発生します。

<input type="text" ng-model="fval" /> 
<input type="text" ng-model="sval" /> 

あなたが{{fval + sval}}を使用してそれらを追加するときですから、2つの文字列のsumは、これら2つの文字列の​​の結果であるため、文字列を取得します。彼らはあなたが以下のようにそれらを交換する必要があり期待通りに動作するためには
：

<input type="number" ng-model="fval" /> 
<input type="number" ng-model="sval" /> 

ホープこれはあなたの時間を節約できます。