Asmita Asmita - 1 month ago 11
AngularJS Question

if condition in ng-repeat on a variable

I get data in angularjs from sql query as:

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


now I want to find out how many records are having same orderId, so that I could place them in same section/div and display it as 1 group.

I am using ng-repeat to display data.

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




What should I add use so I could show the way I want?

Answer

To accomplish something similar you can use angular.filter, and then use the GroupBy function.

After injecting anular-filter in your app, you will only need to

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

here is a plunker with an example of your case.

Comments