How to make calculations with ng-repeat data in AngularJS

Question

I'm pretty brand new to Angular so please bear with me. I am trying to make a calculation of a main "total budget" value minus the sum of other values displayed.

My index.html is currently:

<table class="table">
  <thead>
    <tr>
      <th>Destination</th>         
      <th>Total Budget</th>
      <th>Hotel Cost</th>
      <th>Airfare Cost</th>
      <th>Miscellaneous</th>
      <th>Budget Remaining</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="form-control" ng-model="trip.destination"></td>
      <td><input class="form-control" ng-model="trip.budget"></td>
      <td><input class="form-control" ng-model="trip.lodgingCost"></td>
      <td><input class="form-control" ng-model="trip.airfareCost"></td>
      <td><input class="form-control" ng-model="trip.miscCost"></td>
      <td><button class="btn btn-primary" ng-click="addTrip()">Add Trip</button></td>
      <td><button class="btn btn-info" ng-click="update()">Update</button>&nbsp;&nbsp;<button class="btn btn-info" ng-click="deselect()">Clear</button></td>
    </tr>
    <tr ng-repeat="trip in trips">
      <td>{{trip.destination}}</td>
      <td>{{trip.budget}}</td>
      <td>{{trip.lodgingCost}}</td>
      <td>{{trip.airfareCost}}</td>
      <td>{{trip.miscCost}}</td>
      <td>{{ getRemaining() }}</td> <<!--here is where I run the calculation -->

    </tr>
  </tbody>
</table>

In my controller.js, I've tried variations of some of the things I have found on stackoverflow such as this, this, and this, but I've mostly been getting undefined and NaN's, as if the actual value isn't being read properly?

Any help would be greatly appreciated.

is getRemaining making a http request? If it is the page would load with undefine because the data is still being process by the http in your controller — Nello
– Nello, Commented Jul 19, 2017 at 4:28
I've not much in that, because nothing I have tried has worked, so I've been deleting code when it's not playing nice. But, here is my last try: $scope.getRemaining = function(){ var remainder = $scope.trip.budget - ( $scope.trip.airfareCost + $scope.trip.lodgingCost + $scope.trip.miscCost); return remainder; } — tardisdriver
– tardisdriver, Commented Jul 19, 2017 at 4:29
Just return a static number in getRemaining function and ensure it's working. If it's working the issue might be in the calculation — Jameel Moideen
– Jameel Moideen, Commented Jul 19, 2017 at 4:35

31piy · Accepted Answer · 2017-07-19 05:17:16Z

1

You may try it without the help of a controller function since it is a basic calculation. Though this method is not recommended, its good to get you started.

You can try replacing <td>{{ getRemaining() }}</td> with this:

<td>{{ trip.budget - (trip.lodgingCost + trip.airfareCost + trip.miscCost) }}</td>

This is a simple arithmetic calculation, and it will give you the desired result if all things in this expression are numbers. If any of the item in that expression is NaN, the result will be NaN. So you need to take care of that.

Update:

As per the comment, the data is in wrong format. You are expecting numbers for arithmetic calculation, but they are actually strings. So a calculation like this

"1500" - ("700" + "500" + "200")

will result in a large negative number like -700498700 because the arithmetic is being done after string concatenation i.e. the actual operation is 1500 - 700500200 which results in -700498700.

Temporarily, to make your UI work, you can try a trick. Change the expression to this:

<td>{{ (+trip.budget) - ((+trip.lodgingCost) + (+trip.airfareCost) + (+trip.miscCost)) }}</td>

This will manually typecast the strings to numbers. But the actual fix should be done on MongoDB so that it returns the numbers.

edited Jul 19, 2017 at 5:17

answered Jul 19, 2017 at 4:38

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tardisdriver Over a year ago

Well, this has gotten me closer than I was! Your code as-is pasted into my code yielded a substantially large negative number. Playing with the code, it works when it's just the budget minus one of the budget items, but seems to break when parentheses are introduced.

31piy Over a year ago

It is impossible to be broken. Can you show me the values of these items (trip.budget, trip.lodgingCost, trip.airfareCost, trip.miscCost)?

tardisdriver Over a year ago

Values are being pulled from MongoDB:

{ "_id": "596ec5ed01bca5eebd78fbd0", "destination": "Los Angeles", "budget": "1500", "lodgingCost": "700", "airfareCost": "500", "miscCost": "200" }, { "_id": "596ec5ed01bca5eebd78fbd1", "destination": "New York", "budget": "1600", "lodgingCost": "800", "airfareCost": "500", "miscCost": "100" }, { "_id": "596ec939fcaff20544d8e18d", "destination": "Japan", "budget": "4000", "lodgingCost": "1500", "airfareCost": "2000", "miscCost": "300" }

31piy Over a year ago

@tardisdriver -- See, there is something wrong with the data. The values are strings, and not numbers (see the quotes around the numbers, those make them strings).

tardisdriver Over a year ago

Ah, yes, you're right. Silly mistake. It's working now!

Kavindra · Accepted Answer · 2017-07-19 05:14:26Z

0

Pass the trip object as a parameter to your getRemaining() function.

<td>{{ getRemaining(trip) }}</td>

In your controller, use this object to get values for calculation instead of $scope.trip. So your function would be,

$scope.getRemaining = function(trip){ 
    var remainder = trip.budget - ( trip.airfareCost + trip.lodgingCost + trip.miscCost); 
    return remainder; 
}

answered Jul 19, 2017 at 5:14

Kavindra

1,7072 gold badges15 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to make calculations with ng-repeat data in AngularJS

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related