javascript - 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" />