如何划分通过 ng-repeat 创建的列表的单独部分？答案

【问题标题】：How to divide separate parts the list created via ng-repeat?如何划分通过 ng-repeat 创建的列表的单独部分？
【发布时间】：2015-09-17 11:29:43
【问题描述】：

我列出了通过 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

提前感谢您的关注和时间

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat filtering ng-repeat

【解决方案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

【讨论】：