Angular:使用分隔符/分隔符获取ng-repeat列表

Question

Angular仍然很新,只是找到我的方式.

我正在使用ng-repeat输出一个字母表的名称列表.我想在此列表中添加作为标签的分隔符.

例:

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

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

我的想法是使用嵌套的ng-repeats循环遍历字母表,通过第二个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('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'];
})

小提琴:http://jsfiddle.net/t6Xq8/

我有一些问题.

1. 一般来说,使用嵌套的ng-repeat是解决这个问题的好方法,还是Angular专门为此目的而内置？一些消息人士还说,在ng-repeat中使用函数是一个坏主意.但它确实有效,所以我很困惑为什么我不应该使用它.
2. 在查看控制台时,GetSpeakers会在此示例中被调用两次,我无法找出原因？
3. 我应该如何将对象返回到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

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

Answer 2

将数据映射到对象键为字母的单个对象可能更好.我假设你有像这样的对象:

{id:123, firstName:'Frank',lastName :'Enstein'} 

并希望这封信代表姓氏

var tmp={};
for(i=0;i<authourArray.length;i++){
    var letter=authourArray[i].lastName.charAt(0);
   if( tmp[ letter] ==undefined){
        tmp[ letter]=[]
   }
     tmp[ letter].push( authourArray[i] );
}

/* likely want to loop over all the arrays now and sort unless already sorted from server*/

$scope.repeaterObject=tmp;

现在在标记ng-repeat中,对象键中的所有字母以及该循环内的所有字母都会为该字母执行ng-repeatauthors数组

<div data-ng-repeat="(letter, authors) in repeaterObject">
    <div class="item item-divider">
        {{letter}}
    </div>
    <ul>
        <li ng-repeat="author in authors">{{author.firstName}} {{author.lastName}}</li>
    </ul>
</div>

生成的对象将如下所示:

{
   A:[.....],
   ......
   E:[ {id:123, firstName:'Frank',lastName :'Enstein'}, /* other E author objects*/ ],
   ......
}