如果條件在ng-repeat上變量

Question

我從sql查詢中獲取angularjs中的數據：

{"orders":[
{
    "orderId":"1674","itemId":"468","SubTotal":"40.00","Total":"48.98","Status":"Printed","Title":"Mangled : Large","Quantity":"1","dateCreated":"2009-06-03"
},
{
    "orderId":"1674","itemId":"469","SubTotal":"40.00","Total":"48.98","Status":"Printed","Title":"Skull Collage : Large","Quantity":"1","dateCreated":"2009-06-03"
},
{
    "orderId":"1675","itemId":"33949","SubTotal":"40.00","Total":"48.98","Status":"Printed","Title":"Summerside \"The Saved\" EP CD -Red or Blue! : BLUE","Quantity":"1","dateCreated":"2009-06-03" 
},
{
    "orderId":"1674","itemId":"33954","SubTotal":"40.00","Total":"48.98","Status":"Printed","Title":"Summerside \"The Saved\" EP CD -Red or Blue! : RED","Quantity":"1","dateCreated":"2009-06-03"
}]}

現在我想知道有多少記錄具有相同的orderId ，以便我可以將它們放在相同的section / div中並將其顯示為1組。

我正在使用ng-repeat來顯示數據。

<div ng-repeat="order in itemorders">
<div class="order-lis-box border-radius">
    <div class="up line overflow-hidden text">
        <div class="fl black mb10">Order No. <span>{{ order.orderId }}</span><br><span class="capitalize grey F14 bold">Rs. {{ order.Total }}</span></div>
        <div class="custom-datetime text-right">{{ order.dateCreated }}</div>
    </div>
    .
    .
    .
</div> <!-- order-lis-box -->

我應該添加什么用途才能展示我想要的方式？

Answer 1

要完成類似的操作，可以使用angular.filter ，然后使用GroupBy函數。

在您的應用程序中注入anular-filter后，您只需要

<div ng-repeat="(key,value) in orders | groupBy: 'orderId'">
    <div class="fl black mb10">Order No. <span>{{ key }}
    <div class="order-lis-box border-radius" ng-repeat="order in value">
    <div class="up line overflow-hidden text">
    </span><br><span class="capitalize grey F14 bold">Rs. {{ order.Total }}</span></div>
    <div class="custom-datetime text-right">{{ order.dateCreated }}</div>
</div>
.
.
.
</div>

這里是一個plunker與你的情況的一個例子。

Answer 2

為什么不創建一個Javascript函數來將JSON對象更改為

{
    "orders":
    [
        {
            "orderId":"1674",
            "items" : 
            [
                {
                    "itemId":"468",
                    "SubTotal":"40.00",
                    "Total":"48.98",
                    "Status":"Printed",
                    "Title":"Mangled : Large",
                    "Quantity":"1",
                    "dateCreated":"2009-06-03"
                },
                {
                    "itemId":"469",
                    "SubTotal":"40.00",
                    "Total":"48.98",
                    "Status":"Printed",
                    "Title":"Skull Collage : Large",
                    "Quantity":"1",
                    "dateCreated":"2009-06-03"
                },
                {
                    "itemId":"33954",
                    "SubTotal":"40.00",
                    "Total":"48.98",
                    "Status":"Printed",
                    "Title":"Summerside \"The Saved\" EP CD -Red or Blue! : RED",
                    "Quantity":"1",
                    "dateCreated":"2009-06-03"
                }
            ]
        },
        {
            "orderId":"1675",
            "items" : 
            [
                {
                    "itemId":"33949",
                    "SubTotal":"40.00",
                    "Total":"48.98",
                    "Status":"Printed",
                    "Title":"Summerside \"The Saved\" EP CD -Red or Blue! : BLUE",
                    "Quantity":"1",
                    "dateCreated":"2009-06-03" 
                }
            ]
        }
    ]
}

然后在HTML文件上操作會更容易

<div ng-repeat="order in itemorders">
<div class="order-lis-box border-radius">
    <div class="up line overflow-hidden text">
        <div class="fl black mb10">Order No. <span>{{ order.orderId }}</span><br><span class="capitalize grey F14 bold">Rs. {{ order.Total }}</span></div>
        <div class="custom-datetime text-right">{{ order.dateCreated }}</div>
    </div>
     <div class="up line overflow-hidden text" ng-repeat="item in order.items">
        <div class="fl black mb10">Item Id<span>{{ item.itemId }}</span><br></div>
        .
        .
        .
    </div>
</div>