Question

我从sql查询中获取 angularjs 中的数据：

LListSent<S>

现在我想了解有多少记录具有相同的 orderId ，以便我可以将它们放在相同的 section / div 中将其显示为1组。

我正在使用 ng-repeat 来显示数据。

{"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"
}]}

我应该添加什么才能展示我想要的方式？

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>

如果条件在ng-repeat上变量

2 个答案: