如果条件在 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

你为什么不创建一个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>

Answer 2

要完成类似的事情，您可以使用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，其中包含您的案例示例。