AngularJS ngBind с умножением и суммой

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

Вам необходимо начать с поведения и моделировать его. Таким образом, поведение вычисленного против введенного значения является очень важно.

В частности, давайте определим переменную, которая хранит состояние, рассчитывается или нет.

$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