CODEWITHSUNDEEP
javascriptcssangularjslistangularjs-ng-repeat
Haradzieniec
Haradzieniec

Reputation: 9340

AngularJS: ng-repeat the list but with titles and grouped by

I have

myCtrl.guests = [
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"},
    {"firstName":"Albert", "lastName":"Smith"},
    {"firstName":"Mark", "lastName":"Jones"},
    {"firstName":"Mark", "lastName":"Smith"}
];

and it is perfectly displayed on the page with

    <ul>
        <li ng-repeat="guest in guests">
            {{guest.firstName}}
        </li>
    </ul>

As result, 6 persons displayed in the list.

However, I need to group this list by the last names so that the list on the page looks like this (6 persons with 3 last names = 9 ):

    <ul>
        <li class="title">
            Doe
        </li>
        <li>
            John
        </li>
        <li class="title">
            Jones
        </li>
        <li>
            Peter
        </li>
        <li>
            Mark
        </li>
        <li class="title">
            Smith
        </li>
        <li>
            Anna
        </li>
        <li>
            Albert
        </li>
        <li>
            Mark
        </li>
    </ul>

class="title" above will help to highlight the last names and apply css styles for last names appropriately. Any ideas how to make it with AngularJS? I guess it should be somehow short and nice.

Upvotes: 0

Views: 328

Answers (1)

Nair Athul
Nair Athul

Reputation: 821

You Need to check this fiddle link as it is an angular directive to group and show the grouped result

http://jsfiddle.net/4Dpzj/6/

<div ng-repeat="item in MyList  | orderBy:'groupfield' | groupBy:['groupfield']">

Upvotes: 1

Related Questions