AngularJS: ng-repeat with Groups

1_iOmwue1uxW2O6sbDUEItPw.jpgHere’s a quick tip on how to display grouped data in AngularJS on your ASP.Net Core page (or any other).

Let’s say your have a list of cities, with their associated country already sorted by country then by city:

Canada Toronto
Canada Ottawa
Canada Vancouver

USA Boston
USA New York

To display the Country once, then all the cities, you can use this:

<div ng-repeat="(key, value) in data.cities| groupBy: 'country'">
    <h1>{{key}}</h1>
    <div ng-repeat="row in value">
        {{row.city}}
    </div>
</div>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s