所有ID的AngularJS ng-repeat

Question

我在应用程序中使用Angular。

我是从我的数据库获取数据在阵列状的物品：

 $ordersall[$count] = array( 
     "orderID" => $looporders["orderID"], 
     "customerID" => $looporders["customerID"], 
     "customerName" => $customerName, 
     "orderDate" => $looporders["orderDate"], 
     "orderDeliveryDate" => $looporders["orderDeliveryDate"], 
     "orderStatus" => $looporders["orderStatus"], 
     "orderdetailID" => $row["orderdetailID"], 
     "productTitle" => $productTitle, 
     "productPrijs" => $productPrijs, 
     "aantal" => $row["orderdetailAantal"], 
     "extras" => "", 
     "extrasprice" => ""    
    ); 

现在我想打印出这个数据对于每个ORDERID，每ORDERID我想显示：客户名称，orderDate存储和orderdetails喜欢产品，价格，临时演员...等。但一个订单ID（例如：5）可以有多个orderdetails，所以多个产品的名称，价格，额外等

当我只有一个orderID我解决了它像这样：

Angular

app = angular.module('app', []); 
app.controller("NavCtrl",function($scope,$http){ 
    var serviceBase = 'api/'; 
    $http.get(serviceBase + 'orderoverview/58').then(function (results) { 
     $scope.categories = results.data; 
     $scope.getTotal = function(){ 
    var total = 0; 
    for(var i = 0; i < $scope.categories.length; i++){ 
     var categories = $scope.categories[i]; 
     total += (categories.productPrice * categories.orderdetailAantal); 
     if(categories.extra1 != "") 
     { 
      total += categories.extrasPrice; 
     }   

    } 
    return total; 
} 
    }); 
}); 

HTML

   <div class="col-md-3" ng-controller="NavCtrl"> 
        <div class="sm-st clearfix"> 
         <!--<span class="sm-st-icon st-red"><i class="fa fa-check-square-o"></i></span>--> 
         <div class="sm-st-info"> 
          <i class="fa fa-square"></i> 
          <span>Sander Hofman</span> 
          <p>1 minutes</p> 
          <ul> 
           <li ng-repeat= "p in categories" ng-hide="categories.extra1.length"> 
           {{p.orderdetailAantal}} {{p.productTitle}} <br> 
           + {{p.extra1}} {{p.extra2}} {{p.extra3}} {{p.extra4}} 
           </li> 
          <li class="divider"></li> 
          </ul> 
          <p class="totalprice">{{ getTotal() }} euro</p> 
         </div> 
        </div> 
       </div>  

但是现在我如何能做到在HTML中我有一个列表项，每单编号及其所有ORDERDETAILS的？

例如：

的orderID：5

orderdetail1：productTitle，价格，数量

orderdetail2：productTitle，价格，数量

orderdetail2：productTitle，价格，数量

orderID6：

orderdetail1：productTitle，价格，数量

JSON样品

[{"orderID":4,"customerID":1,"customerName":"Sander Hofman","orderDate":"2015-04-20 09:49:06","orderDeliveryDate":"2015-04-20","orderStatus":"done","orderdetailID":2,"productTitle":"Sexy Teacher","productPrijs":4,"aantal":1,"extras":"","extrasprice":""}, 
{"orderID":5,"customerID":2,"customerName":"Jelle Hofman","orderDate":"2015-04-20 12:05:09","orderDeliveryDate":"2015-04-20","orderStatus":"prepare","orderdetailID":3,"productTitle":"The Coach","productPrijs":3,"aantal":1,"extras":"","extrasprice":""}, 

    {"orderID":5,"customerID":2,"customerName":"Jelle Hofman","orderDate":"2015-04-20 12:05:09","orderDeliveryDate":"2015-04-20","orderStatus":"prepare","orderdetailID":4,"productTitle":"The Virgin","productPrijs":3.2,"aantal":1,"extras":"","extrasprice":""}, 

    {"orderID":5,"customerID":2,"customerName":"Jelle Hofman","orderDate":"2015-04-20 12:05:09","orderDeliveryDate":"2015-04-20","orderStatus":"prepare","orderdetailID":5,"productTitle":"Sexy Teacher","productPrijs":4,"aantal":3,"extras":"","extrasprice":""}, 

    {"orderID":22,"customerID":11,"customerName":"Tom Welslau","orderDate":"2015-04-20 14:15:12","orderDeliveryDate":"2015-04-20","orderStatus":"prepare","orderdetailID":22,"productTitle":"The Virgin","productPrijs":3.2,"aantal":1,"extras":"","extrasprice":""}, 

    {"orderID":22,"customerID":11,"customerName":"Tom Welslau","orderDate":"2015-04-20 14:15:12","orderDeliveryDate":"2015-04-20","orderStatus":"prepare","orderdetailID":23,"productTitle":"The Virgin","productPrijs":3.2,"aantal":1,"extras":"","extrasprice":""} 

Answer 1

这个问题可能是在服务器返回JSON

的方式。如果JSON将被嵌套阵列（每个订单都有一系列产品），您可以轻松完成两次ng重复操作。

<li ng-repeat= "p in categories" ng-hide="categories.extra1.length"> 
     {{p.orderID}} 
     <ul> 
      <li ng-prepeat="product in p.products"> 
      {{product.title}} 
      </li> 
     </ul> 
</li> 

所以也许解决方案将改变服务器如何返回JSON数据的方式？ （如果可能的话）

Answer 2

一个更清洁的解决方案将首先呈现订单列表。当用户选择特定的订单时，您可以导航到不同的视图来显示订单详情。这对于可伸缩性非常重要。不过，如果你想继续你的approac，您可以如下图所示

<div ng-repeat="order in orders"> 
<span>{{order.orderID}}</span> 
<span>{{order.customerID}}</span> 
<span>{{order.customerName}}</span> 
<span>{{order.orderDate}}</span> 
<span>{{order.orderDeliveryDate}}</span> 
<span>{{order.orderStatus}}</span> 

<div ng-repeat="orderDetail in order"> 
    <span>{{orderDetail.orderdetailID}}</span> 
    <span>{{orderDetail.productTitle}}</span> 
    <span>{{orderDetail.productPrijs}}</span> 
    <span>{{orderDetail.aantal}}</span> 
    <span>{{orderDetail.extras}}</span> 
</div> 

用嵌套的NG-重复实现它，这将工作提供的数据是这样的：在JSON数据每个订单也连接到它的所有订单细节该订单

下面是一个示例JSON数据说明这一点

[{“的orderID”：4“的customerID”：1，“客户名称”：“桑德Hofman“，”orderDate“：”2015-04-20 09:49:06“，”orderDeliveryDate“：”2 015-04-20“，”orderStatus“：”done“， orderDetails：[ {”orderdetailID“：10，”productTitle“：”Sexy Teacher“，”productPrijs“：4，”aantal“：1， “：”“”extrasprice“：”“} {”orderdetailID“：11，”productTitle“：”Sexy2 Teacher“，”productPrijs“：4，”aantal“：1，”extras“：”“， extrasprice“：”“}， {”orderdetailID“：12，”productTitle“：”Sexy3 Teacher“，”productPrijs“：4，”aantal“：1，”extras“：”“，extrasprice”：“”} ， {“orderdetailID”：13，“productTitle”：“Sexy4 Teacher”，“productPrijs”：4，“aantal”：1，“extras”：“”，extrasprice“：”“}， {”orderdetailID“ ：14，“productTitle”：“Sexy5 Teacher”，“productPrijs”：4，“aantal”：1，“extras”：“”，extrasprice“：”“} ]}， {”orderID“ “customerID”：2，“customerName”：“Francis Ezengige”，“orderDate”：“2015-04-20 09:49:06”，“orderDeliveryDate”：“2015-04-20”，“orderStatus”：“完成“， orderDetails：[ {”orderdetailID“：20，”productTitle“：”Sexy Teacher“，”productPrijs“：4，”aantal“：1，”extras“：”“，”extrasprice“：”“} ， {“orderdetailID”：21，“productTitle”：“Sexy2 Teacher”，“productPrijs”：4，“aantal”：1，“extras”：“”，“extrasprice”：“”}， {“orderdetailID” ：22，“productTitle”：“Sexy3 Teacher”，“productPrijs”：4，“aantal”：1，“extras”：“”，extrasprice“：”“}， {”orderdetailID“：23，”productTitle“ ：“Sexy4 Teacher”，“productPrijs”：4，“aantal”：1，“extras”：“”，extrasprice“：”“}， {”orderdetailID“：24，”productTitle“：”Sexy5 Teacher“， “productPrijs”：4，“aantal”：1，“extras”：“”，extrasprice“：”“} ]}]

如果你研究上面的问题，你会发现，初步在订单表中，下面是一个名为orderDetails的字段。该字段的值是一个数组，其元素是类型顺序细节的对象。所以我在示例中有一个2个订单的数组，每个订单中有5个商品在orderDetails中。所以ng-repeat重复所有的订单，但是在每个订单中也按顺序重复每个项目。详细信息

至于示例代码，它只涉及以上述格式返回JSON数据。确切的实现取决于您使用的服务器类型。