Angular JS - 而不是总和值被连接起来答案

【问题标题】：Angular JS - Instead of sum values are getting concatenatedAngular JS - 而不是总和值被连接起来
【发布时间】：2016-10-21 17:35:51
【问题描述】：

我是 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'。

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

对不起我的英语，因为它不是我的第一语言。谁能帮我解决我哪里出错了。

【问题讨论】：

如果您真的想做数学运算，请将输入控件的类型更改为数字。
这就是 javascript 的工作方式 :) 乘法不适用于字符串，然后它会尝试变得聪明并将字符串用作数字
它确实适用于乘法，因为* 是一个纯粹的数学运算符。因此，您的字符串输入会自动解析为数字。然而，由于+ 是一个数学运算，以及字符串连接运算符，当两个参数之一为字符串类型时，它就像字符串连接一样工作。
但是请注意，这不是角度表达式的典型应用，因为您通常会在控制器内部执行逻辑然后绑定到它。
@NnN 另一种解决方法可能是{{fval * 1 + sval * 1}}，因为 1 的操作会将字符串转换为数字（仅供参考）

标签： javascript angularjs

【解决方案1】：

尝试改变

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

到

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

【讨论】：

工作，谢谢！！

【解决方案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" />

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

【讨论】：

谢谢！这在我更改输入类型时有效。但是你能说一下，当应用程序第一次运行时它是如何工作的，我在标签中得到了正确的值即使在编译时模型是字符串。当我第一次着陆时，我可以看到我的结果值为 3。

【解决方案3】：

这只是一个 JavaScript 的东西。您的数字是字符串，+ 是连接运算符。解决此问题的一种方法：

parseInt(fval) + parseInt(sval)

编辑：Angular 表达式中不允许这样做（见下文）。答案适用于“普通”JS 代码。

【讨论】：

你能在 angularjs 表达式中做到这一点吗？
您不能在角度表达式中执行 parseInt。 stackoverflow.com/questions/26293769/…
感谢您澄清@MuthukannanKanniappan
谢谢穆图坎南。我不知道这一点（总是试图阻止 HTML 中的任何逻辑）。
@Keugels 我写了一条评论，我认为这可能适用于 angularjs 表达式：{{fval * 1 + sval * 1}}