Calculation logic within editable table row

Question

I have a table like this:

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

and I need to calculate each itemDeliveryCost by formula

item.DeliveryCost = item.Quantity * item.PricePerDimension

Question is - what is the best approach to do this? Notice that cahges for item.Quantity and item.PricePerDimension must be reflected in item.DeliveryCost dynamically.

Did you take a look to [my answer](http://stackoverflow.com/a/41890735/4927984)? — Mistalis, Jan 30 '17 at 07:53

score 2 · Answer 1 · answered Jan 27 '17 at 09:34

As DeliveryCost = Quantity * Price, I would suggest to update DeliveryCost each time Quantity or Price is changed. It is exactly the use of 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"/>

Then, define in your controller updateCost() function:

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

Rakesh Chand · Answer 2 · 2017-01-27T07:46:03.227

1

Inside your api success call you can do following

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

You will get calculated values in view..

If you want to change values after getting data, then above approach won't work but for that you need to call a method on value change of quantity and dimention like following

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

edited Jan 27 '17 at 07:46

answered Jan 27 '17 at 07:28

Rakesh Chand

3,105
1
20
41

1

Thanks for your answer but this code doesn't work when I changing values for item.PricePerDimension and item.Quantity – Akmal Salikhov Jan 27 '17 at 07:37
Updated the answer You can use ng-blur or ng-change events on inputs – Rakesh Chand Jan 27 '17 at 07:46
Yes this code works, but this is similar to jquery code I moving from to angular. I'd like to know if there another approach. Something like defining rules to scope model itself and whenever model changes rules are triggering. Something like your first solution, but working responsively to user's acting. Thanks! – Akmal Salikhov Jan 27 '17 at 07:54
Yes there are ways to do it, but this one was good for less amount of data. I will update this answer in future if I find any better approach. – Rakesh Chand Jan 27 '17 at 07:57

Calculation logic within editable table row

2 Answers2