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;
};

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

2 个答案: