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

Viewed 11254

Still pretty new with Angular, just finding my way around.

I'm using ng-repeat to output an alphabetised list of names. I'd like to add dividers within this list that act as labels.

Example:

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

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

My thinking is to use nested ng-repeats to loop through the alphabet, getting an object with the authors for that specific letter with a second ng-repeat. Here's what I have so far:

<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 code:

.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/

I have a couple of questions.

  1. In general, is using a nested ng-repeat a good approach for this problem, or does Angular have built-in specifically for this purpose? Some sources also say using a function in ng-repeat is a bad idea. But it does work so I'm confused as to why I shouldn't use this.
  2. When looking at the console, GetSpeakers gets called twice in this example and I can't figure out why?
  3. How should I return an object to the scope within the GetSpeakers function, while preventing overloading the $scope?
3 Answers
Related