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的值将得到正确的结果。

我更改了添加代码，如下所示：

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

运行应用程序后，我得到的正确值为3 ，但是当我更改输入值时，我得到的是串联值。 就像如果我更改文本框的值一样，对于firstTextBox = 12＆secondTextBox = 3，那么我得到的结果值为'123'。

因此，当我第一次运行应用程序时，我以正确的值着陆，但是在客户端更改输入是串联的。

对不起，我的英语不是我的母语。 谁能帮我解决我的问题。

Answer 1

尝试改变

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

至

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

Answer 2

发生这种情况是因为ng-model的类型被声明为text。

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

因此，当您使用{{fval + sval}}添加它们时，会得到一个字符串，因为两个字符串的sum是这两个字符串的concationation的结果。
为了使它们按预期工作，您应该像下面这样替换它们：

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

希望这可以节省您的时间。

Answer 3

这只是JavaScript的事情。 您的数字是字符串，而+是串联运算符。 解决此问题的一种方法：

parseInt(fval) + parseInt(sval)

编辑：这在Angular表达式中是不允许的（请参见下文）。 答案对于在“普通” JS代码中有效。