ionic-ion-autoListDivider
Gives a set of directives for automatically adding in list dividers for an ng-repeat. (Works for Alphabetical or by Categories)
Setup
You'll need a list of objects (sorted) and an ng-repeat
.
Import the script and include the module
angular.module('ionicApp', ['ionic','ionic.ion.autoListDivider'])
An example sorting function in your controller:
items.sort(function(a,b){
var textA = a.user.name.first.toUpperCase();
var textB = b.user.name.first.toUpperCase();
return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
})
Basic Usage
Take any ng-repeat
and add the auto-list-divider
and the auto-list-divider-value
attributes. The auto-list-divider-value
attribute should have the property passed in that you are sorting on.
<ion-item auto-list-divider auto-list-divider-value="{{item.user.name.first}}" ng-repeat="item in items">
By default, it will divide these items alphabetically by the first letter of the value passed in.
Example: Default Behavior
Default behavior is to take the first letter of the auto-list-divider-value
passed in and use that to create alphabetical dividers.
<ion-list>
<ion-item auto-list-divider auto-list-divider-value="{{item.user.name.first}}" class="item-avatar" ng-repeat="item in items">
</ion-item>
</ion-list>
Example: Custom Divider Function
A custom function to calculate the divider based on the passed in value can be specified using auto-divider-function
. This should be the name of a fucction in your controllers scope.
<ion-list>
<ion-item auto-divider auto-divider-value="{{item.user.gender}}" auto-divider-function="dividerFunction" class="item-avatar" ng-repeat="item in items">
</ion-item>
</ion-list>
Example: Custom Divider Function with different sorting criteria
If different sorting criteria are needed, you also need different divider values (eg name, age,..). To cope with this, pass a data object holding the different keys you'll need:
<ion-list>
<ion-item auto-divider auto-divider-object="item.user" auto-divider-function="dividerFunction" class="item-avatar" ng-repeat="item in items">
</ion-item>
</ion-list>
In your controller...
$scope.dividerFunction = function(key){
return key;
}
key
will be the value passed into auto-divider-value
.
CodePen of examples: http://codepen.io/andrewmcgivery/pen/XJeQyW