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

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

具体来说，我们定义一个变量来存储"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

AngularJS 带乘法和求和的 ngBind

AngularJS ngBind with multiplication and sum

angularjs

sum

ng-bind