Question

我是AngularJs的初学者，我很难显示两个数字的总和。第一个脚本完美地运作：

<div>
   <p><input type="text" ng-model="price1" /> <strong>{{price1}}</strong></p>
   <p><input type="text" ng-model="price2" /> <strong>{{price2}}</strong></p>
   <p><strong>{{total = (price1 * 1 + price2 * 1) }}</strong></p>
</div>

但是当我尝试使用控制器测试时，如下所示：

<div ng-controller="myCtrl">
   <p><input type="text" ng-model="price1" /> <strong>{{price1}}</strong></p>
   <p><input type="text" ng-model="price2" /> <strong>{{price2}}</strong></p>
   <p><strong>{{total}}</strong></p>
</div>
<script>
   var app = angular.module('firstApp', []);
   app.controller('myCtrl', ['$scope', function($scope) {
      $scope.total = ($scope.price1  + $scope.price2);
   }]);
</script>

我没有结果，只有NaN值。我不知道发生了什么！

Answer 1

您的代码中存在以下几个问题：

未定义变量$scope.price1和$scope.price2 一旦控制器初始化。使用算术运算 undefined值会产生NaN作为结果。
你计算了 $scope.total只需一次。其结果未更新 $scope.price1或$scope.price2
在输入中，您应使用type="number"而非type="text"，然后$scope.price1和$scope.price2的值将被解析并汇总为数字。在你的代码中，它们被串联为字符串。

＆＃13;

var app = angular.module('myApp', []);

app.controller("myCtrl", function ($scope) {
  $scope.price1 = 1;
  $scope.price2 = 2;
  
  $scope.getTotal = function() {
    return $scope.price1 + $scope.price2;
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
   <p><input type="number" ng-model="price1" /> <strong>{{price1}}</strong></p>
   <p><input type="number" ng-model="price2" /> <strong>{{price2}}</strong></p>
   <p><strong>{{getTotal()}}</strong></p>
</div>
</div>

＆＃13;

Answer 2

您需要设置默认值吗？它是在说NaN，因为你还没有在输入框中输入任何内容吗？

尝试在总计算中初始化控制器中的变量。

$scope.price1 = 0;
$scope.price2 = 0;

Answer 3

调用总和时，值是未定义的，只需给它们一个初始值

$scope.price1 = 1;
$scope.price2 = 2;
$scope.total = ($scope.price1  + $scope.price2);

你在做什么等于：

$scope.total = ($scope.price1  + $scope.price2);
$scope.total = (undefined  + undefined); //equals to NaN

Answer 4

我这样做但是我必须在我的控制器中给出price1和price2的值，就像那样：

<script>
   var app = angular.module('firstApp', []);
   app.controller('myCtrl', ['$scope', function($scope) {
      $scope.price1 = 1;
      $scope.price2 = 2;
      $scope.total = ($scope.price1 + $scope.price2);
   }]);
</script>

但我有两个输入。我想像计算器一样使用它们，将值放入其中并查看结果。

使用Angular计算总和

4 个答案: