Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewmcgivery committed Feb 5, 2015
1 parent 2e38417 commit 941c179
Showing 1 changed file with 22 additions and 3 deletions.
25 changes: 22 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,39 @@
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.
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 item-avatar" ng-repeat="item in items">
<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>
```
Expand All @@ -25,7 +44,7 @@ A custom function to calculate the divider based on the passed in value can be s

```
<ion-list>
<ion-item auto-divider auto-divider-value="{{item.user.gender}}" auto-divider-function="dividerFunction" class="item item-avatar" ng-repeat="item in items">
<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>
```
Expand Down

0 comments on commit 941c179

Please sign in to comment.