解析AngularJS中的整数

Question

我在我们的应用程序中使用了AngularJS。

在下面的代码中，在加载页面时，表达式addition（number，value）会正确解析并给出输出为1+1=2，但在更改输入时它不会正确解析并且输出为'1 + 2 = 12 ”。

我需要改变哪里？

<div ng-controller='MathsController'> 
    <input type="range" min="0" max="100" step="1" value="1" ng-model='valuetoadd'/> 

    <p>Addition table of <b>{{valuetoadd}}</b></p> 

    <div ng-repeat='number in numbers'> 
     {{number}} + {{valuetoadd}} = {{ addition(number,valuetoadd) }} 
    </div> 
</div> 
<script type="text/javascript"> 
    function MathsController($scope) 
    { 
     $scope.valuetoadd= 1; 
     $scope.numbers =[1,2,3,4,5,6,7,8,9,10]; 
     $scope.addition = function(number,valuetoadd) 
     { 
      return number+valuetoadd; 
     } 
    } 
</script> 

Answer 1

可能number beging作为字符串传递。 尝试：

 $scope.addition = function(number, multiplier) 
     { 
      return + number + multiplier; 
     } 

+将字符串转换成数字。

编辑： 现在，我看到multiplier作为字符串传递。 因此IT必须转换为...

对不起，我没有仔细阅读代码。

 $scope.addition = function(number, multiplier) 
     { 
      return number + +multiplier; 
     } 

谢谢@Artur指出了这一点。

Answer 2

您需要强制变量成某种数字类型的（从HTML输入值作为默认字符串传递）

$scope.addition = function (number, multiplier) { 
    return number + parseInt(multiplier, 10); 
} 

Answer 3

似乎是问题的根源就在这里： https://github.com/angular/angular.js/issues/1189

而且阅读本SO话题：Two-way binding with range and number input in AngularJS

正如你可以使用thefrontender和tosh shimayama提出的解决方案的解决方法。

但值得注意的是，它是乘数谁需要解析为整数，而不是number。看到我对你的问题的评论。

Answer 4

另一个快速解决方案是在添加之前将值乘以1。这将强制JavaScript将字符串的值转换为整数。

实施例：

{{值* 1 + 10}}