Titles in Collection-Repeat Help

ionic-v1
1

I am working on a company directory app that contains two large listings (Alphabetical & By Department). There are over 200 employees at the company so the listing is pretty long. I found that ng-repeat worked and looked great - however it too far too long to load the page.

From my research, it appears that I should be using Collection-Repeat to load only the visible data allowing the app to respond much quicker to scrolling and such. I am fairly new to angular.js and JSON (obtained by $http) and could use a few pointers in how to achieve my desired result:

My repeat code looks like this:

<div ng-repeat="row in data | orderBy: 'alpha'">  
           
    <div class="item item-divider" ng-show="CreateHeader(row.alpha)">
        {{row.alpha}}
    </div>

    <a class="item item-thumbnail-left item-text-wrap">
        <img ng-src-i="data:image/jpeg;base64,{{row.image}}">
        <h2><{{row.firstname}} {{row.lastname}}</h2>
        <p>{{row.jobtitle}}</p>
    </a>  

</div>

My “CreateHeader” function operated with the following code:

$scope.CreateHeader = function(title) {
    showHeader = (title!=$scope.currentTitle); 
        $scope.currentTitle = title;
    return showHeader;
}

My JSON data is in the following format:

[  
   {  
      "id":"61",
      "alpha":"Z", <--USED TO SORT ALPHABETICALLY
      "firstname":"John",
      "lastname":"Smith",
      "jobtitle":"Executive Assistant",
      "phone":"123.456.7890",
      "email":"name@email.com",
      "department":"Corporate Management",  
      "image":"<Base64 Code Here>"
   }
]

Here is a screen shot of what my application looks like - thus far, and what I am trying to achieve with Collection-Repeat:

Any tips on how I can replicate my item-dividers within a Collection-Repeat?

Thanks in advance!
LSI

2

Although it isn’t thoroughly documented in the collection-repeat docs, there is a codepen example that demonstrates dividers.

Codepen: http://codepen.io/ionic/pen/mFygh