[英]Calculating sum using Angular
我是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值。 我不知道發生了什么!
您的代碼中存在幾個問題:
$scope.price1
和$scope.price2
。 使用undefined
值的算術運算會產生NaN
作為結果。 $scope.total
。 其結果未在$scope.price1
或$scope.price2
更改時更新 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>
你需要設置默認值嗎? 它是說NaN,因為你沒有在輸入框中輸入任何東西?
嘗試在總計算上方初始化控制器中的變量。
$scope.price1 = 0;
$scope.price2 = 0;
調用sum時,值是未定義的,只需給它們一個初始值
$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
我這樣做但是我必須在我的控制器中給出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>
但我有兩個輸入。 我想像計算器一樣使用它們,將值放入其中並查看結果。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.