如何通过ng-repeat创建的列表分割成单独的部分？

Question

我列出了一个通过ng-repeat显示的国家列表:

<ul>
    <li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
</ul>

在此之前，我已经创建了一个包含所有国家的排序数组：

var countriesNotSorted = ['Ukraine','Urugvai','Russia','Romania','Rome','Argentina','Britain','Indonesia','Germany','Brazil','Portugal','Polska','Uganda','Algeria','Andorra'],
    countriesArray = countriesNotSorted.sort();

我有一个带有可点击字母列表的清单，当其中一个被点击时，该列表变得有序。问题是：是否可能在一开始将显示在Angular ng-repeat中的国家列表（即“Algeria，Andorra，Argentina”和所有以“ A”开头的国家）分成单独的部分，因此它们会出现在某个标题之后（例如大写字母“A”）？

A:
Algeria
Argentina
Andorra

B:
Brazil
Bolgaria
Belgium

这是我的 Plnkr。

非常感谢您的关注和时间。

- Johnny Juarez

Answer 1

你可以简单地使用ng-repeat来遍历你的字母表数组。

<div class="container">

    <input id="q" type="text" ng-model="search " />
    <div ng-repeat="letter in alphabet.letter" ng-show="countriesFiltered.length > 0">
      <h3>{{letter}}</h3>
      <ul>
        <li ng-repeat="country in (countriesFiltered = (countries.country | filter:letter:startsWith | filter:search:startsWith))">{{ country }}</li>
      </ul>
    </div>

</div>

Plnkr

- antoinestv