3

私は 4 つの製品を持っており、その数量をユーザーから取得しています。これらの商品は固定価格で、最後に合計金額を表示したい。

これは私のコントローラーです

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 に答える