3

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

这是我的控制器

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>

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

有没有其他方法可以实现这一目标？

4

1 回答 1

2

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

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

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

演示

于 2015-05-04T06:16:56.037 回答