15

私はAngularjsを使用してこのコードを持っています：

<!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の場合、合計は7ではなく34になります）

私は何が間違っているのですか？

4

7 に答える 7

22

それが実際に当てはまる場合、起こっているのは、xとyに渡されている値が文字列として扱われ、連結されていることです。あなたがすべきことは、それらを使用して数値に変換することですparseInt

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

または簡潔さを好む場合

return $scope.x*1 + $scope.y*1;
于 2013-03-26T22:38:38.957 に答える
7

あなたはこれを求めている：

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

+2つの文字列がある場合、文字列の連結をオーバーライドします。それらを整数または浮動小数点数に明示的にキャストする必要があります。 -、、は*、/可能であればすべて数字にキャストします。

于 2013-03-26T22:38:23.110 に答える
2

これは、連結が加算演算またはプラス（+）演算子よりも優先されるためです。マイナス演算子（-）は問題なく機能するので、ここに単純なハックがあります！

<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>
于 2015-12-09T20:52:53.430 に答える
1

正しい方法で浮動小数点を追加する

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

$ scope.Totalは、バインドng-modelが適用されている場合、たとえば次の場合に、ビューに正しく表示されるようになりました。

$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の浮動小数点数に注意してください

于 2014-04-29T18:45:19.323 に答える
1

加算演算なので入力タイプを数値にします

<input type="text" ng-model="x" />
<input type="text" ng-model="y" />
于 2017-03-13T10:14:57.657 に答える
0

2つの数値を足し合わせるには、文字列の整数を解析し、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;
    }
}
于 2013-08-04T23:22:03.220 に答える
0

入力のタイプを「数値」に変更することをお勧めします。そうすれば、それを解析する必要はなく、angularは自動的に整数に変換します。私はそれを行いました、そしてそれはスコープなしで動作しますが、あなたの{{total}}を宣言するためだけです

于 2016-05-19T20:29:46.010 に答える