解析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}}