Angular.js: ng-bind nested dependencies

Question

I have a problem with Angular.js.

I'm trying to build a simple invoice web app...
When editing invoices, the user should be able to insert and delete new items.

Each item has a readonly field which is the subtotal (unit price * qty) which is calculated by the function calcSubTotal(row)

At the end of the invoice, there is the GrandTotal, calculated by the function calcGrandTotal()

Ex:

HTML:

<div data-ng-repeat='row in rows'>
    Unit Price: <input type='text' name='price' data-ng-model='row.unit_price' />
    Qty: <input type='text' name='qty' data-ng-model='row.qty' />

    <input type='text' readonly value='{{ calcSubTotal(row) }}' />
</div>

<p>GRAND TOTAL: {{ calcGrandTotal() }}</p>

JS (EDIT):

$scope.calcSubTotal = function(row) {
    console.log(row);
    return (row.unit_price * row.qty);
}

$scope.calcGrandTotal = function() {

    var total = 0.00;

    $($scope.rows).each(function(i, row) {
        var x = $scope.calcSubTotal(row);
        total += x || 0.00;
    });

    return total;
};

Now if I put console.log("CALLED") inside the calcGrandTotal() function I see that it is being called lots of times.
EDIT:
Worst, if I put console.log(row) in the calcSubTotal(row) function, I can see that it is being called for all of the items even when I'm modifying a single item in the invoice.

I mean, if I modify item 1, it shouldn't recalculate item 2 but only update the grand total (based on the previously calculated subtotal for item 2, which hasn't changed...)

How can I optimize this thing?

Thanks.

Mike Quinlan · Accepted Answer · 2014-05-21 21:26:08Z

The problem with putting functions inside of ngBind brackets is that it it called every time the view is rendered. You should only be calculating totals when each one of the rows quantity or price changes. Consider this

EDIT: I didn't see that you were calculating subtotals for each line item. Here's a revised solution:

<div ng-repeat="row in rows">
  <input ng-model="row.qty" ng-change="calculateTotals()"/>
  <input ng-model="row.price" ng-change="calculateTotals()"/>
  <input readonly value="{{row.subTotal}}"/>
</div>

<div ng-bind="grandTotal"></div>

Then in your controller/directive do something like this

$scope.calculateTotals = function() {
  var grandTotal = 0;
  angular.forEach($scope.rows, function(row) {
    row.subTotal = row.qty * row.price;
    grandTotal += row.subTotal;
  });
  $scope.grandTotal = grandTotal;
}

NOTE: You might also have to call it somewhere in your controller after you've recieved the row data:

$http.get('/my/invoice/').success(function(rows){
  $scope.rows = rows;
  $scope.calculateTotals();
});

Chetan · Accepted Answer · 2014-05-21 19:16:26Z

0

You might want to do something like this,

HTML (same as yours)

<div data-ng-repeat='row in rows'>
      <p>row {{$index}}</p>
      Unit Price: <input type='text' name='price' data-ng-model='row.unit_price' />
      <br>
      Qty: <input type='text' name='qty' data-ng-model='row.qty' />
      <br>

      <input type='text' readonly value='{{ calcSubTotal(row) }}'>
    </div>

    <p>GRAND TOTAL: {{ calcGrandTotal() }}</p>

JS

angular.module("app", []).controller('ctrl', function($scope){
  $scope.rows = [{unit_price: 0, qty: 0}, {unit_price: 0, qty: 0}];

  $scope.calcSubTotal = function(row){
    return parseFloat(row.unit_price) * parseFloat(row.qty);
  }

  $scope.calcGrandTotal = function() {

      var total = 0.00;

      $($scope.rows).each(function(i, row) {
          var x = $scope.calcSubTotal(row);
          total += x || 0.00;
      });

      return total;
  };
});

I have put these together in a plunk here.

answered May 21, 2014 at 19:16

Chetan

564 bronze badges

1 Comment

TesX Over a year ago

Yeah, thanks, but it is in fact what I've already done (for brevity I just didn't write the calcSubTotal(row) function in my question). Anyway, if you put console.log(row) in the calcSubTotal(row) function, you'll see that it is being called for both items even when I'm modifying the other item in the invoice. I mean, if I modify item 1, it shouldn't recalculate item 2 but only update the grand total (based on the previously calculated subtotal fo r item 2, which hasn't changed...)

Collectives™ on Stack Overflow

Angular.js: ng-bind nested dependencies

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related