javascript - 使用 Angular 计算总和

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>

但是当我尝试使用 Controller 测试它时，就像这样:

<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

您的代码中存在几个问题:

1. undefined variable $scope.price1 和 $scope.price2一旦 Controller 被初始化。算术运算使用undefined 值生成 NaN 作为结果。
2. 你计算$scope.total 一次。其结果不会在更改时更新$scope.price1 或 $scope.price2
3. 在输入中你应该使用 type="number" 而不是 type="text" 然后是 $scope.price1 的值和$scope.price2 将被解析并汇总为数字。在您的代码中，它们被连接成字符串。

var app = angular.module('myApp', []);

app.controller("myCtrl", function ($scope) {
  $scope.price1 = 1;
  $scope.price2 = 2;
  
  $scope.getTotal = function() {
    return $scope.price1 + $scope.price2;
  };
});

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