角度js添加两个数字问题答案

【问题标题】：angular js adding two numbers issue角度js添加两个数字问题
【发布时间】：2013-03-26 22:36:20
【问题描述】：

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

我做错了什么？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

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

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

或者如果你喜欢简洁

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

【讨论】：

这不是什么！我在哪里可以了解更多关于这种简洁性的信息？
@mpora - 我猜只是通过四处寻找。我不知道有一个网站将所有快捷方式都显示在列表中。我从这篇关于 guid 的帖子中得到了那个：stackoverflow.com/a/2117523/1026459
谢谢，我一直在寻求简洁。
我在这个示例中想知道的是，为什么 Angular js 知道何时调用函数总？我附加了一个调试器，它似乎在轮询。
plus 优先于按位，应该是这样： return ($scope.x|0) + ($scope.y|0);我也认为这是相反的方式。

【解决方案2】：

你想要这个：

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

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

【讨论】：

它们是整数吗？如果不是那将是为什么。 parseInt 有什么不好的地方？

【解决方案3】：

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

<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>

【讨论】：

【解决方案4】：

以正确的方式添加浮点数

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

【讨论】：

如果可能请添加演示

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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;
    }
}

【讨论】：

【解决方案7】：

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

【讨论】：