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 + ...
}

然后你只需要将它连接到View：

<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与乘法和求和

1 个答案: