Javascript 如何在AngularJS中使用ng重复数据进行计算

我是新来的，所以请容忍我。我试图计算主“总预算”值减去显示的其他值之和

My index.html当前为：

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

目的地
总预算
酒店成本
机票费
混杂的
剩余预算
添加行程
更新清除
{{trip.destination}
{{trip.budget}}
{{trip.lodingCost}
{{trip.airparecost}
{{trip.miscCost}
{{getRemaining（）}}
由于这是一个基本的计算，您可以在没有控制器函数帮助的情况下尝试它。虽然不推荐使用此方法，但它有助于您开始使用

您可以尝试用以下内容替换
{{getRemaining（）}
：

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

将导致大量负数，如
-700498700
，因为算术是在字符串串联之后进行的，即实际操作是
1500-700500200
，这将导致
-700498700

暂时，为了让UI正常工作，您可以尝试一个技巧。将表达式更改为：

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

{{（+trip.budget）-（+trip.lodingcost）+（+trip.airparecost）+（+trip.miscCost））}

这将手动将字符串转换为数字。但是实际的修复应该在MongoDB上完成，以便它返回数字。
将trip对象作为参数传递给getRemaining（）函数

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

显示具有
getRemaining
功能的控制器getRemaining是否正在发出http请求？如果是这样的话，页面将加载undefine，因为数据仍由controllerI中的http进行处理，我对此没有做太多，因为我尝试过的任何东西都不起作用，所以我一直在删除代码，但代码不太好。但是，这是我最后一次尝试：
$scope.getRemaining=function（）{var remains=$scope.trip.budget-（$scope.trip.airbarecost+$scope.trip.LodingCost+$scope.trip.miscCost）；return remains；}
只需在getRemaining函数中返回一个静态数字，并确保它正常工作。如果它起作用，问题可能在计算中。好吧，这让我比以前更接近了！粘贴到我的代码中的代码产生了一个很大的负数。如果只是预算减去其中一个预算项目，代码就会起作用，但如果引入括号，代码就会中断，这是不可能中断的。你能给我看一下这些项目的值吗（
trip.budget，trip.lodingcost，trip.airparecost，trip.miscCost
）？这些值是从MongoDB中提取的：
{u id:“596ec5ed01bca5eebd78fbd0”，“目的地”：“洛杉矶”，“预算”：“1500”，“住宿成本”：“700”，“机票成本”：“500”，“miscCost:“200”}，{u id:“596ec5ed01bca5eebd78fbd1”“目的地”：“纽约”，“预算”：“1600”，“住宿成本”：“800”，“机票成本”：“500”，“杂项成本”：“100”}，{u id”：“596ec939fcaff20544d8e18d”，“目的地”：“日本”，“预算”：“4000”，“住宿成本”：“1500”，“机票成本”：“2000”，“杂项成本”：“300”}，请看，数据有问题。这些值是字符串，而不是数字（请参阅数字周围的引号，它们构成字符串）。啊，是的，你说得对。愚蠢的错误。现在开始工作了！
<td>{{ getRemaining(trip) }}</td>

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