Home / Questions / 3498
Accepted
toledano
Asked: 2020-02-02 11:28:26 +0800 CST 2020-02-02 11:28:26 +0800 CST

将值转换为数字

  • 772

我正在学习 AngularJS 和 JavaScript，并且按照我正在使用的书中的示例，我找到了一些我想理解的东西。

我有一个控制器，它执行两种数学运算之一，具体取决于按下哪个按钮：加法和乘法。

var controladorApp = angular.module('controladores', []);
controladorApp.controller('controladorConMetodos', function($scope){
  $scope.valor1 = 0;
  $scope.valor2 = 0;

  $scope.sumar = function () {
    $scope.resultado = $scope.valor1 + $scope.valor2;
  };

  $scope.multiplicar = function() {
    $scope.resultado = $scope.valor1 * $scope.valor2;
  }
});

在网页上，我只是简单地用自己的按钮调用每个方法，并在其后一行显示结果。两种方法的字段input相同。

<div class="" ng-controller="controladorConMetodos">
  <input type="text" ng-model='valor1'>
  <input type="text" ng-model='valor2'>
  <button type="button" name="sumar" ng-click="sumar()">Sumar</button>
  <button type="button" name="multiplicar" ng-click='multiplicar()'>Multiplicar</button>
  <hr>
  <p>{{ resultado }}</p>
</div>

这是我的问题：当我使用方法multiplicar()时，结果是正确的。但是，当我调用该方法时sumar()，值是连接的而不是相加的。

我想我必须投，但我想知道为什么（以及如何）。在Warrior's Manual这本书中他们没有提到这种情况，所以我想这与我的AngularJS版本有关，与书中使用的版本1.4.9相比。1.3.2

javascript

2 Answers

  1. Best Answer

    你必须使用parseInt

      $scope.sumar = function () {
    $scope.resultado = parseInt($scope.valor1) + parseInt($scope.valor2);
  };

  $scope.multiplicar = function() {
    $scope.resultado = parseInt($scope.valor1) * parseInt($scope.valor2);
  }

    此外，您可以使用它<input type="number">来防止输入非数字字符。

    否则，您应该添加一些类型验证。

    至于为什么：这与 AngulaJS 无关，只是 javascript。碰巧*它没有产生效果，因为它上面没有函数String，所以它首先执行类型转换，然后执行乘法。if 运算符对字符串+ 有一个函数，即连接。因此没有转换。

    >10 * '10'
<100
>10 + '10'
<"1010"
    • 7

  2. 你也可以使用元素<input type="number" ... />

    这样您就不需要在控制器中进行转换，因为它是自动完成的（嗯，这由Angularinput[number]的内置指令处理）

    您还将受益于该元素的其他优势（验证、可用性改进……）

    • 3