2013-03-26 12 views
9

mam ten kod za pomocą kątowych JS:kątowe js dodawanie dwóch liczb problem

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

Jestem w stanie wykonać mnożenie, dzielenie i odejmowanie, ale jako dodatek, kod po prostu skleja X i Y wartości (czyli jeśli x = 3 i y = 4, łączna liczba wynosi 34 zamiast 7) ​​

Co robię źle?

Odpowiedz

17

Jeśli tak jest rzeczywiście, to co się dzieje, to wartości, które są przekazywane dla x i y są traktowane jako łańcuchy i łączone. Co należy zrobić, to przekonwertować je do numerów używając parseInt

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

lub jeśli wolisz zwięzłość

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

Czy to nie jest coś! Gdzie mogę dowiedzieć się więcej na temat tego rodzaju zwięzłości? – mpora

+1

@mpora - Tylko przez szturchnięcie, tak myślę. Nie znam witryny, która ma wszystkie skróty wyświetlane na liście. Mam to z tego posta o guid's: http://stackoverflow.com/a/2117523/1026459 –

+0

Dzięki, zawsze szukam zwięzłości. – mpora

7

tego chcesz:

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

+ przesłaniana ciąg konkatenacji, gdy masz 2 sznurki. Będziesz musiał rzucić je do liczb całkowitych lub jawnie. -, *, / będzie wszystkie odlewane na liczby, jeśli to możliwe.

+0

parseFloat działa, ale nie parseInt, ciekawe. – mpora

+0

czy są liczbami całkowitymi? jeśli nie, to właśnie dlatego. Co nie działa w ParseInt? –

0

Aby dodać dwa numery razem chciałbym analizować ciąg dla liczb całkowitych i sprawdzić wartość null:

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

Dodawanie pływających numerów w prawidłowy sposób

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

$ scope.Total teraz będą poprawnie wyświetlane w widoku jeśli wiązanie z ng-model nanosi na przykład, jeśli masz

$scope.firstValue = 10.01; 
$scope.firstValue = 0.7; 

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

Zmienna $scope.Total będzie 10.709999999999999 a to nie jest poprawna ! Dodawanie za pomocą parametru parseFloat nie będzie wystarczające dla poprawnej wartości. Ale jeśli stosuje

$scope.Total = parseFloat($scope.Total.toFixed(2));

Wartość spowoduje poprawnie: $scope.Total = 10.71

Uważać wola liczb zmiennoprzecinkowych w javascript

+0

proszę dodaj wersję demo, jeśli to możliwe –

0

to dlatego, że powiązanie ma wyższy priorytet nad operacji dodawania lub Plus (+) Operator. Ponieważ Minus Operator (-) działa dobrze, oto prosty hack!

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

Można również to zrobić:

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

Radzę zmienić typ swojego wejścia do „numer”, a następnie, nie będzie trzeba go analizować, kanciasty będzie go konwertować automatycznie do interger.Zrobiłem to i to działa bez zakresie, ale tylko zadeklarować swoją {{całkowitą}}

1

Marka Typ sygnału wejściowego jako liczby, ponieważ jest to operacja dodawania

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