AngularJS：ng-repeat 列表，但带有标题并按

Question

我有

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

它完美地显示在页面上

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

结果，列表中显示了 6 个人。

但是，我需要按姓氏对列表进行分组，以便页面上的列表如下所示（6 个人，3 个姓氏 = 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" 将有助于突出显示姓氏，并为姓氏适当地应用 css 样式。 任何想法如何使用 AngularJS 制作它？我想它应该是简短而优美的。

Answer 1

你需要检查这个小提琴链接，因为它是一个角度指令来分组和显示分组结果

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

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