Question

我使用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 SAMPLE

  {
    "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] ...？

Answer 1

order.details [productPrijs]应该是order.details.productPrijs？

getTotal函数（仅限ES5）：

$scope.getProductTotal = function (details) {
  return details.productPrijs * details.aantal + details.extrasPrice;
}

$scope.getTotal = function () {
  if ($scope.orders && $scope.orders.details) {
    return $scope.orders.details
      .map($scope.getProductTotal)
      .reduce(function (total, productTotal) {
        return total + productTotal;
      });
  }
};

为避免重复（DRYness），可以在模板中重复使用getProductTotal：

<li ng-repeat= "details in o.details">
  {{details.aantal}} x {{details.productTitle}}
  <div ng-if="details.extras">
   +{{details.extras}} 
   </div>
   {{getProductTotal(details)}}
 </li>     
 <p class="totalprice">{{getTotal()}} euro</p>

为了避免在摘要时进行过多计算，您可以在查询服务器时计算总计（如果您的数据仅以此方式更新）

Answer 2

您可以使用此语法

创建将作为已过滤数组的新范围变量

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

然后创建一个控制器方法来循环遍历filteredOrders数组并总计价格

Answer 3

控制器中的

：

getorders = angular.module('getorders', []);
getorders.controller("allorders",function($scope,$http){
    var serviceBase = 'api/';
    $scope.orders=[];
    $scope.getTotal=function(orders){
        return orders.reduce(function(total,detail){
            total+=(detail.productPrijs * detail.aantal)+detail.extrasPrice
        },0)
    }
    $http.get(serviceBase + 'orders').then(function (results) {
        $scope.orders = results.data;
    });
});

在视图中

<p class="totalprice">{{getTotal(o.details)}} euro</p>

编辑：重新设计（不）请先取样charlietfl

Answer 4

我认为最好的方法是计算控制器的总价。如果我理解正确的话就是这样：

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

        var total = 0;
        angular.forEach($scope.orders, function(order)) {
            total += (order.productPrijs * order.aantal) + order.extrasPrice;
        }

        $scope.orderTotal = total;
    });
});

您只需在HTML中插入orderTotal即可。

<p class="totalprice">{{ orderTotal  }} euro</p>

我没试过，我希望它有效。

AngularJS：计算嵌套数组中的总价

4 个答案: