javascript - AngularJS:计算嵌套数组中的总价格

我正在使用AngularJS来显示一组包含所有必需数据的订单。

AngularJS

getorders = angular.module('getorders', []);
getorders.controller("allorders",function($scope,$http){
    var serviceBase = 'api/';
    $http.get(serviceBase + 'orders').then(function (results) {
        $scope.orders = results.data;

        for(var i = 0; i < $scope.orders.length; i++){
            var orders = $scope.orders[i];
        }
    });
});

的HTML

<div class="orderspresent" ng-cloak="">
 <div class="roworders" style="margin-bottom:5px;" ng-controller="allorders" >
  <div class="col-md-3" ng-repeat= "o in orders | orderBy:'-orderDate'" ng-hide= "o.orderStatus=='done'">
    <div class="sm-st clearfix">
      <div class="sm-st-info">
         <span>{{o.customerName}}</span>
         <p>{{o.orderDate | date:'h:mm'}}</p>
         <ul>
           <li ng-repeat= "details in o.details">
            {{details.aantal}} x {{details.productTitle}}
            <div ng-if="details.extras">
            +{{details.extras}}
            </div>
            {{(details.productPrijs * details.aantal)+details.extrasPrice}}
            </li>
            <p class="totalprice">{{getTotal()}} euro</p>
        </div>
       </div>
      </div>
     </div>
    </div>

JSON样本

  {
    "49": {
           "orderID": 49,
           "customerID": 61,
           "orderDate": "2015-05-06 10:03:05",
           "orderDeliveryDate": "2015-05-06",
           "orderStatus": "prepare",
           "customerName": "Caroline",
           "details": [
                       {
                         "orderdetailID": 83,
                         "productTitle": "Sexy Teacher",
                         "productPrijs": 4,
                         "aantal": 2,
                         "extras": "Extra syrup, Soya milk",
                         "extrasPrice": 0.6
                       },
                       {
                         "orderdetailID": 84,
                         "productTitle": "Caramel Macchiato",
                         "productPrijs": 5.2,
                         "aantal": 2,
                         "extras": false,
                         "extrasPrice": 0
                      },
                      {
                         "orderdetailID": 85,
                         "productTitle": "The Coach",
                         "productPrijs": 3,
                         "aantal": 3,
                         "extras": false,
                         "extrasPrice": 0
                     },
                     {
                        "orderdetailID": 86,
                        "productTitle": "The Virgin",
                        "productPrijs": 3.2,
                        "aantal": 5,
                        "extras": "Extra syrup, Whipped cream, 3 espresso shots",
                        "extrasPrice": 2.4
                     }
                    ]
                }
    }

对于每个订单，都会显示几个详细信息。这很有效，但现在我也想在最后一个<p>中显示订单的总价。您可以在html中看到计算：{{(details.productPrijs * details.aantal)+details.extrasPrice}}，但随后我得到每个产品的总价，而不是该顺序中所有产品的总价。

因此，我可能必须在角度控制器中进行相同的计算，但似乎无法达到order.details [productPrijs] ...？

最佳答案

您可以使用以下语法创建一个新的范围变量，该变量将是过滤后的数组

 <li ng-repeat= "o in filteredOrders=(orders | orderBy:'-orderDate')">

然后创建一个控制器方法以遍历filteredOrders数组并合计价格