angularjs - Angular : Getting list with ng-repeat with dividers/separators

Question

Angular 还是很新的，只是找到了我的方法。

我正在使用 ng-repeat 输出按字母顺序排列的名称列表。我想在此列表中添加充当标签的分隔符。

例子:

--------
A
--------
Author 1
Author 2

--------
B
--------
Author 3
Author 4
etc

我的想法是使用嵌套的 ng-repeat 来遍历字母表，使用第二个 ng-repeat 为该特定字母的作者获取一个对象。这是我到目前为止所拥有的:

<div data-ng-repeat="letter in alphabet">
    <div class="item item-divider">
        {{letter}}
    </div>
    <ul>
        <li data-ng-repeat="speaker in GetSpeakers(letter)" type="item-text-wrap" href="#/speaker/{{speaker.ID}}">
            {{speaker.title}}
        </li>
    </ul> 
</div>

Controller 代码:

.controller('SpeakersCtrl', function($scope, $routeParams, StorageHandler) {

    $scope.GetSpeakers = function(letter) {
        // Get list of authors for that letter
        console.log('test '+letter);
    };

    $scope.alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
})

fiddle : http://jsfiddle.net/t6Xq8/

我有一些问题。

一般来说，使用嵌套的 ng-repeat 是一个很好的方法
问题，还是 Angular 有专门为此目的而内置的？ Some sources还说在 ng-repeat 中使用函数是一个坏主意。但它确实有效，所以我很困惑为什么我不应该使用它。

在查看控制台时，在此示例中 GetSpeakers 被调用两次，我不知道为什么？

我应该如何将对象返回到 GetSpeakers 函数内的范围，同时防止 $scope 过载？

Answer 1

我认为你可以用更简单的方式做到这一点，而无需:

必须做一个嵌套 ng-repeat

写出整个字母

需要处理没有作者的信件

操作原始对象数组或复制它

编写更少的代码行

通过使用 $index .

所以看起来像这样:

<div ng-repeat="speaker in speakers | orderBy : 'name'">
    <div class="item item-divider" ng-if="firstLetter(speaker.name) != firstLetter(speakers[$index-1].name)">
      {{firstLetter(speaker.name)}}
    </div>
    {{speaker.name}}
</div>

这需要一个简单的函数来获取第一个字母，例如:

function firstLetter(name) {
  return name && name.charAt(0);
}

因此，它的作用是将您传递的任何内容的第一个字母与前一个对象的第一个字母进行比较，如果它们不同，则将分隔符与该字母相加。非常干净和简单:)

看看这个工作 JsFiddle

您显然可以改进该代码以处理大写/小写(即在比较之前始终大写)以及将比较提取到函数中以获得更清晰的代码。