Question

我有使用angular js的代码：

<!DOCTYPE html >
<html>
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script type="text/javascript">
        function TodoCtrl($scope) {
            $scope.total = function () {
                return $scope.x + $scope.y;
            };

        }
    </script>
</head>
<body>
   <div ng-app>
  <h2>Calculate</h2>

  <div ng-controller="TodoCtrl">
    <form>
        <li>Number 1: <input type="text" ng-model="x" /> </li>
        <li>Number 2: <input type="text" ng-model="y" /> </li>
        <li>Total <input type="text" value="{{total()}}"/></li>       
    </form>
  </div>
</div>

</body>
</html>

我可以进行乘法，除法和减法但是为了加法，代码只是连接x和y值（即如果x = 3且y = 4，则总数为34而不是7）

我做错了什么？

Answer 1

如果确实如此，那么正在发生的事情是将x和y传递的值视为字符串并连接。你应该做的是使用parseInt

将它们转换为数字

return parseInt($scope.x) + parseInt($scope.y);

或者如果您更喜欢简洁

return $scope.x*1 + $scope.y*1;

Answer 2

你想要这个：

   return parseFloat($scope.x) + parseFloat($scope.y);

当你有2个字符串时，

+会覆盖字符串连接。您需要明确地将它们转换为整数或浮点数。如果可能的话，-，*，/都将转换为数字。

Answer 3

以正确的方式添加浮点数

 $scope.Total = parseFloat($scope.firstValue) + parseFloat($scope.secondValue);
 $scope.Total = parseFloat($scope.Total.toFixed(2));

如果应用了与ng-model的绑定，$ scope.Total现在将在视图中正确显示例如，如果你有

$scope.firstValue = 10.01;
$scope.firstValue = 0.7;

$scope.Total = parseFloat($scope.firstValue) + parseFloat($scope.secondValue);

变量$scope.Total将是10.709999999999999，这是不正确的！添加parseFloat对于正确的值是不够的。但是如果你申请

$scope.Total = parseFloat($scope.Total.toFixed(2));

该值将正确显示：$scope.Total = 10.71

小心javascript中的浮点数

Answer 4

这是因为连接优先于加法运算或加号（+）运算符。因为，减号运算符（ - ）工作正常，这是一个简单的黑客！

<script type="text/javascript">
    function TodoCtrl($scope) {
        $scope.total = function () {
            //Subtracting a Zero converts the input to an integer number
            return (($scope.x - 0) + ($scope.y - 0));
        };

    }
</script>

你也可以这样做：

<form>
    <li>Number 1: <input type="text" ng-model="x" /> </li>
    <li>Number 2: <input type="text" ng-model="y" /> </li>
    <li>Total <input type="text" value="{{(x-0) + (y-0)}}"/></li>       
</form>

Answer 5

将输入类型设为数字，因为它是加法运算

<input type="text" ng-model="x" />
<input type="text" ng-model="y" />

Answer 6

要将两个数字加在一起，我将解析整数字符串并检查null：

function TodoCtrl($scope) {
    $scope.total = function() {
        var firstNum = parseInt($scope.firstNum) 
        var secondNum = parseInt($scope.secondNum);

        if (!firstNum)
            firstNum = 0;
        if (!secondNum)
            secondNum = 0;

        return firstNum + secondNum;
    }
}

Answer 7

我建议您将输入的类型更改为＆＃34; number＆＃34;然后，您将无需解析它，angular会自动将其转换为interger。我做了它并且它有效，没有范围，但只是声明你的{{total}}

角js添加两个数字问题

7 个答案: