带乘法和和的AngularJS ngBind

我有四种产品，我从用户那里获取其数量。这些产品有固定的价格，我想在最后显示总金额

这是我的控制器

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>

总金额：

但上面的代码不工作，我没有得到任何更新的总金额文本框中的值。当用户输入产品数量时，我希望在“数量”文本框中实时更新

---

还有其他方法可以实现这一点吗

您需要从行为开始并对其建模。因此，计算与输入的行为非常重要

具体来说，让我们定义一个变量来存储是否计算“总计”的状态

$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" />

...

---

为什么您的总数是一个

字段？比如说，它不应该是一个

{{{Spaghetti\u数量*Spaghetti\u价格+…}

？我还希望它是可编辑的。这就是为什么它在输入字段中，这会对计算产生什么影响？用户编辑后，将不再计算总数？它不会在文本框中显示更新后的值。我想在用户添加或编辑数量值后显示它。我不明白当您都希望该值由用户编辑并进行计算时，该行为是什么。如果用户编辑总量，然后编辑数量，会发生什么情况？总量会反映什么？用户输入，还是重新计算总数？