AngularJS 中两个数的加法

最近，我开始学习 AngularJS。AngularJS 是一个 JavaScript 框架，它可以帮助你在 HTML 标签属性中声明更多功能强大的特性。

开始编写代码

我尝试做的第一件事是添加两个数字并将结果显示在 TextBox 中。我编写的代码如下…

<div ng-app="">
    <p>First Number:
        <input type="text" ng-model="a" />
    </p>
    <p>Second Number:
        <input type="text" ng-model="b" />
    </p>
    <p>Sum: {{ a + b }}</p>
</div>

几点说明

• ng-model 指令将输入字段的值绑定到应用程序变量名。因此，变量 "a" 将包含第一个 TextBox 的值，而 "b" 将包含第二个 TextBox 的值。
• {{ expression }} 用于动态绑定表达式的结果。因此，在 TextBoxes 中键入时，该位置将填充表达式的结果，即我们期望的求和结果。

好的，让我们看看接下来发生了什么

以下截图将告诉你之后发生了什么。

实际上它并没有相加，而是将数字连接起来。为什么会发生这种情况？这是因为 TextBoxes 中的值始终是 string。它们不是数字。因此，“+”运算符会帮助它们连接起来。

寻找解决方案！！！

现在，我研究并找到了两种解决方案。

解决方案 1 – 使用双重否定

非常巧妙的技巧。代码如下…

<div ng-app="">
    <h3>Using Double Negation</h3>

    <p>First Number:
        <input type="text" ng-model="a" />
    </p>
    <p>Second Number:
        <input type="text" ng-model="b" />
    </p>
    <p>Sum: {{ a -- b }}</p>
</div>

解决方案 2 – 使用 HTML5 输入类型 Number

这是实现此任务的首选方法，因为它使用 HTML5 输入类型 Number。因此，当我们使用这种 Number 类型时，“+”运算符将起作用，因为这些值默认是数字。

<div ng-app="">
    <h3>Using Input Type Number</h3>

    <p>First Number:
        <input type="number" ng-model="c" />
    </p>
    <p>Second Number:
        <input type="number" ng-model="d" />
    </p>
    <p>Sum: {{ c + d }}</p>
</div>

演示

• jsfiddle 链接 – 使用 AngularJS 求和

展望未来

希望你喜欢这篇博文。感谢阅读。随着我的进步和发现更多有趣的东西，我将在未来的博文中分享。祝你编码愉快。 :)