如何使用AngularJS中的ng-repeat數據進行計算

我是Angular的全新品牌，請耐心等待。我正在計算一個主「總預算」值減去顯示的其他值的總和。如何使用AngularJS中的ng-repeat數據進行計算

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

在我controller.js，我試過的一些事情的變化我已經在計算器如this，this發現，和this，但我大部分都是未定義的和NaN的，好像實際值沒有被正確讀取？

任何幫助將不勝感激。

來源

2017-07-19 tardisdriver

顯示控制器與'getRemaining'功能 –

是getRemaining製作一個HTTP請求？如果它是頁面將加載undefine，因爲數據仍然由您的控制器中的http進程 – Nello

我沒有太多的，因爲沒有我已經嘗試過的工作，所以我一直在刪除代碼，當它不播放不錯。但是，這是我的最後一次嘗試：'$ scope.getRemaining = function（）{ \t var remaining = $ scope.trip.budget - （$ scope.trip.airfareCost + $ scope.trip.lodgingCost + $ scope.trip。miscCost）; \t return remaining; }' – tardisdriver

您可以在沒有控制器功能的幫助下嘗試它，因爲它是基本計算。雖然不建議使用這種方法，但它可以幫助您開始。

你可以試試這個替代<td>{{ getRemaining() }}</td>：

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

這是一個簡單的算術計算，它會給你想要的結果如果在這個表達式所有的東西都是數字。如果該表達式中的任何項目是NaN，結果將是NaN。所以你需要照顧這一點。

更新：

按照註釋，數據格式錯誤。您期待算術計算的數字，但它們實際上是字符串。所以像這樣的

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

計算會導致類似-700498700大負數，因爲算法進行字符串連接，即實際操作1500 - 700500200導致-700498700後，正在做。

暫時，爲了使您的用戶界面能夠正常工作，您可以試試一下。表達式改成這樣：

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

這將手動強制轉換的字符串的數字。但實際的修復應該在MongoDB上完成，以便返回數字。

來源

2017-07-19 04:38:25 31piy

嗯，這使我比我更接近！你的代碼被粘貼到我的代碼中，產生了一個相當大的負數。玩代碼時，它只是在預算減去預算項目之一時起作用，但在引入括號時似乎破壞了。 – tardisdriver

這是不可能被打破的。你能告訴我這些物品的價值嗎（'trip.budget，trip.lodgingCost，trip.airfarecost，trip.miscCost'）？ – 31piy

價值觀正在從MongoDB中拉：'{ 「_id」：「596ec5ed01bca5eebd78fbd0」，「目標」：「洛杉磯」，「預算」：「1500」，「lodgingCost」：「700」，「airfareCost 「：」500「，」miscCost「：」200「 }， { 」_id「：」596ec5ed01bca5eebd78fbd1「，」目標「：」紐約「，」預算「：」1600「，」 lodgingCost 「：「800」，「airfareCost」：「500」，「miscCost」：「100」 }，{ 「_id」：「596ec939fcaff20544d8e18d」，「目的地」：「日本」，「預算」：「4000」，「lodgingCost」：「1500」，「airfareCost」：「2000」，「miscCost」：「300」 }' – tardisdriver

將trip對象作爲參數傳遞給getRemaining（）函數。

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

在您的控制器中，使用此對象來獲取計算值而不是$ scope.trip。所以你的功能是，

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

來源

2017-07-19 05:14:26 KKK

這工作！謝謝！ – tardisdriver

如何使用AngularJS中的ng-repeat數據進行計算

回答

相關問題