Code Monkey home page Code Monkey logo

ionic-ion-autolistdivider's Introduction

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>

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.