AngularJSng ngind與乘法和總和

Question

我有四種產品，我從用戶處獲得它的數量。這些產品有固定價格，我想最後顯示總金額。

這是我的控制器

application.controller('SaleController', function ($scope) { 
$scope.Spaghetti_price=50; 
$scope.Macaroni_price=100; 
$scope.Noodles_price=40; 
$scope.MegaNoodles_price=70; 
} 

，這裏是我的看法

<div> 
<input type="number" class="text-input" ng-model="Spaghetti_qty" /> 
<input type="number" class="text-input" ng-model="Macaroni_qty" /> 
<input type="number" class="text-input" ng-model="Noodles_qty" /> 
<input type="number" class="text-input" ng-model="MegaNoodles_qty" /> 
</div> 
<div> 
Total Amount: 
<input type="number" class="text-input" ng-model="totalAmount" ng-bind="(Spaghetti_qty*Spaghetti_price)+(Macaroni_qty*Macaroni_price)+(Noodles_qty*Noodles_price)+(MegaNoodles_qty*MegaNoodles_price)"/> 
</div> 

但上面的代碼不工作我沒有得到總金額文本框的任何更新值。隨着用戶輸入產品數量，我希望在數量文本框中進行實時更新。

是否有其他方法可以實現這一目標？

Answer 1

你需要從行爲和模型開始。所以，計算與輸入的行爲非常重要，其中是。

具體來說，讓我們定義一個變量來存儲「total」是否被計算的狀態。

$scope.isTotalCalculated = true; // at first it is calculated 

我們還需要變量來保存總 - $scope.totalAmount - 它會在每個數量變化而更新，除非$scope.isTotalCalculated === false。

而且我們需要updateTotal()函數。

總之，它看起來像這樣：

$scope.isTotalCalculated = true; 
$scope.totalAmount = 0; 
$scope.updateTotal = updateTotal; 

updateTotal(); // initial update of total 

function updateTotal(){ 
    if (!$scope.isTotalCalculated) return; 
    $scope.totalAmount = $scope.Spaghetti_price * $scope.Spaghetti_qty + ... 
} 

然後你只需要電線它高達查看：

<input type="number" ng-model="Spaghetti_qty" ng-change="updateTotal()" /> 
<input type="number" ng-model="Macaroni_qty" ng-change="updateTotal()" /> 
... 

<input type="number" ng-model="totalAmount" ng-change="isTotalCalculated = false" /> 

Demo