所有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：customerName、orderDate 和订单详细信息，如产品、价格、额外费用等。但是订单 ID（例如：5）可以有多个订单详细信息，因此有多个产品名称、价格、附加功能等。

当我只有 1 个 orderID 时，我这样解决：

角度

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 中实现这一点，我为每个 orderID 及其所有 orderdetails 都有一个列表项？

示例：

订单ID：5

orderdetail1：产品名称、价格、数量

orderdetail2：产品名称、价格、数量

orderdetail2：产品名称、价格、数量

orderID6：

orderdetail1：产品名称、价格、数量

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-repeats

 <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

更简洁的解决方案是首先显示订单列表。当用户选择特定订单时，您可以导航到不同的视图以显示订单详细信息。这对于可扩展性很重要。但是，如果你想继续你的方法，你可以通过使用嵌套的 ng-repeat 来实现它，如下所示

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

如果您的数据使得 JSON 数据中的每个订单还附加了该订单的所有订单详细信息，这将起作用

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

[{"orderID":4,"customerID":1,"customerName":"Sander Hofman","orderDate":"2015-04-20 09:49:06","orderDeliveryDate":"2015- 04-20","订单状态":"完成", 订单详细信息：[ {"orderdetailID":10,"productTitle":"性感老师","productPrijs":4,"aantal":1,"extras":"","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":5,"customerID":2,"customerName":"Francis Ezengige","orderDate":"2015-04-20 09:49:06","orderDeliveryDate":"2015-04-20" “订单状态”：“完成”， 订单详细信息：[ {"orderdetailID":20,"productTitle":"性感老师","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 个订单的数组，每个订单在 orderDetails 中有 5 个项目。所以 ng-repeat 会重复所有订单，但在每个订单中也会重复 orderDetails 中的每个项目

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