可编辑表格行内的计算逻辑

Question

我有一张这样的桌子：

<tr class="data-row" ng-repeat="item in model.Invoice.InvoiceItemData">
        <td>
            <input type="text" name="itemServiceTitle" ng-model="item.ServiceTitle" />
        </td>
        <td>
            <input type="text" name="itemQuantity" ng-model="item.Quantity"/>
        </td>
        <td>
            <input type="text" name="itemPricePerDimension" ng-model="item.PricePerDimension" />
        </td>
        <td>
            <input type="text" name="itemDeliveryCost" ng-model="item.DeliveryCost" readonly="readonly" />
        </td> ...

我需要通过公式计算每个 itemDeliveryCost

item.DeliveryCost = item.Quantity * item.PricePerDimension

问题是 - 最好的方法是什么？请注意，item.Quantity 和 item.PricePerDimension 的 cahges 必须动态反映在 item.DeliveryCost 中。

Answer 1

作为DeliveryCost = Quantity * Price，我建议每次更改数量或价格时更新DeliveryCost。正是ng-change的用法：

<input type="text" ng-model="item.Quantity" ng-change="updateCost()"/>

<input type="text" ng-model="item.PricePerDimension" ng-change="updateCost()"/>

<input type="text" ng-model="item.DeliveryCost"/>

---

然后，在你的控制器中定义updateCost()函数：

$scope.updateCost = function() {
    $scope.item.DeliveryCost = $scope.item.Quantity * $scope.item.PricePerDimension;
}

Answer 2

在您的 api 成功调用中，您可以执行以下操作

angular.forEach($scope.model.Invoice.InvoiceItemData, function (item) {
    item.DeliveryCost = item.Quantity * item.PricePerDimension;
});

您将在视图中获得计算值..

如果你想在获取数据后改变值，那么上面的方法是行不通的，但是你需要调用一个方法来改变数量和维度的值，如下所示

  <input type="text" name="itemQuantity" ng-model="item.Quantity"  
     ng-blur="deliveryCostChanging(item)"/>
  <input type="text" name="itemPricePerDimension"   
    ng-model="item.PricePerDimension" ng-blur="deliveryCostChanging(item)"/>


$scope.deliveryCostChanging = function(item){
     item.DeliveryCost = item.Quantity * item.PricePerDimension;
};