所有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數據。確切的實現取決於您使用的服務器類型。