Analyse des entiers dans AngularJS

Question

J'utilise AngularJS dans l'un de nos applications.

Dans le code ci-dessous, lors du chargement de la page l'expression additionne (nombre, valuetoadd) analyse correctement et donne la sortie comme 1+1=2 mais en changeant l'entrée, elle n'analyse pas correctement et donne la sortie comme `1 + 2 = 12 '.

Où dois-je changer?

<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

Peut être number beging passé comme une chaîne. Essayez:

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

+ pourrait convertir la chaîne en nombre.

EDIT: Maintenant, je vois que multiplier est passée sous forme de chaîne. Donc, il doit être converti à la place ...

Désolé que je n'ai pas lu le code attentivement.

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

Merci @Artur pour avoir signalé cela.

Answer 2

Vous devez forcer les variables dans une sorte de type numérique (valeurs des entrées HTML sont transmises sous forme de chaîne par défaut)

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

Answer 3

On dirait que la racine du problème se trouve ici: https://github.com/angular/angular.js/issues/1189

lire également ce sujet SO: Two-way binding with range and number input in AngularJS

Pour contourner ce problème, vous pouvez utiliser les solutions proposées par thefrontender et tosh shimayama.

Il est à noter, cependant, que c'est le multiplicateur qui nécessite d'analyser en entier, pas le number. Voir mon commentaire à votre question.

Answer 4

Une autre solution rapide consiste à multiplier la valeur par 1 avant l'ajout. Cela forcera JavaScript à convertir la valeur de la chaîne en entier.

Exemple:

{{valeur * 1 + 10}}