15

我有使用 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）

我究竟做错了什么？

4

7 回答 7

22

如果确实如此，那么正在发生的事情是为 x 和 y 传入的值被视为字符串并连接起来。你应该做的是使用它们将它们转换为数字parseInt

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

或者如果你喜欢简洁

return $scope.x*1 + $scope.y*1;
于 2013-03-26T22:38:38.957 回答
7

你要这个：

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

+当您有 2 个字符串时覆盖字符串连接。您需要将它们显式转换为整数或浮点数。 -, , 如果可能*，/将全部转换为数字。

于 2013-03-26T22:38:23.110 回答
2

这是因为连接的优先级高于加法运算或加号 (+) 运算符。因为，减号运算符 (-) 工作得很好，这里有一个简单的技巧！

<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>
于 2015-12-09T20:52:53.430 回答
1

以正确的方式添加浮点数

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

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

$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中的浮点数

于 2014-04-29T18:45:19.323 回答
1

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

<input type="text" ng-model="x" />
<input type="text" ng-model="y" />
于 2017-03-13T10:14:57.657 回答
0

要将两个数字相加，我将解析字符串的整数并检查是否为空：

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;
    }
}
于 2013-08-04T23:22:03.220 回答
0

我建议您将输入的类型更改为“数字”，然后，您不需要解析它，角度会自动将其转换为整数。我做到了，它可以工作，没有范围，但只是为了声明你的 {{total}}

于 2016-05-19T20:29:46.010 回答