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＆amp; secondTextBox = 3，然后我得到结果值为'123'。

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

对不起我的英语，因为它不是我的第一语言。任何人都可以在我出错的地方帮助我。

Answer 1

尝试更改

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

要

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

Answer 2

这是因为ng-model的类型被声明为文本。

<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代码。

Angular JS - 而不是和值正在被连接

3 个答案: