ramanan12345 · April 4, 2015 08:56
diff --git a/autoDivider.markdown b/autoDivider.markdown
diff --git a/index.html b/index.html
 <html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    
  </head>
  <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Auto Divider</h1>
    </ion-header-bar>

    <ion-content>
      <ion-list>
        <div auto-list-divider auto-list-divider-value="{{item.user.name.first}}" class="item item-avatar" ng-repeat="item in items">
 		<img src="{{item.user.picture.thumbnail}} " />
 		<h2>{{item.user.name.first}} {{item.user.name.last}}</h2>
 		<p>{{item.user.location.city}} {{item.user.password}}</p>
 		</div>
        <!--<ion-item auto-list-divider auto-list-divider-value="{{item.user.gender}}" auto-list-divider-function="dividerFunction" class="item-avatar" ng-repeat="item in items">
 		<img src="{{item.user.picture.thumbnail}} " />
 		<h2>{{item.user.name.first}} {{item.user.name.last}}</h2>
 		<p>{{item.user.location.city}} {{item.user.password}}</p>
 		</ion-item>-->
      </ion-list>
    </ion-content>

  </body>
 </html>
diff --git a/script.js b/script.js
 angular.module('ionic.ion.autoListDivider',[])

 .directive('autoListDivider', function($timeout) {  
 	var lastDivideKey = "";

 	return {
 		link: function(scope, element, attrs) {
 			var key = attrs.autoListDividerValue;

 			var defaultDivideFunction = function(k){
 				return k.slice( 0, 1 ).toUpperCase();
 			}
      
 			var doDivide = function(){
 				var divideFunction = scope.$apply(attrs.autoListDividerFunction) || defaultDivideFunction;
 				var divideKey = divideFunction(key);
 				
 				if(divideKey != lastDivideKey) { 
 					var contentTr = angular.element("<div class='item item-divider'>"+divideKey+"</div>");
 					element[0].parentNode.insertBefore(contentTr[0], element[0]);
 				}

 				lastDivideKey = divideKey;
 			}
 		  
 			$timeout(doDivide,0)
 		}
 	}
 });

 angular.module('ionicApp', ['ionic','ionic.ion.autoListDivider'])

 .factory('PersonService', function($http){
 	var BASE_URL = "http://api.randomuser.me/";
 	var items = [];
 	
 	return {
 		GetFeed: function(){
 			return $http.get(BASE_URL+'?results=30').then(function(response){
 				items = response.data.results;
 				return items;
 			});
 		}
 	}
 })
 .controller('MyCtrl', function($scope, $timeout, PersonService) {
  $scope.items = [];
  
  PersonService.GetFeed().then(function(items){
    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;
    })
    
    /*
    items.sort(function(a,b){
      var textA = a.user.gender.toUpperCase();
      var textB = b.user.gender.toUpperCase();
      return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
    })*/
    
    $scope.dividerFunction = function(key){
      return key;
    }
    
 	$scope.items = items;
  });
  
 });
diff --git a/style.css b/style.css
 body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
 }
	<html ng-app="ionicApp">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<title>Ionic Pull to Refresh</title>

	<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
	<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

	</head>
	<body ng-controller="MyCtrl">

	<ion-header-bar class="bar-positive">
	<h1 class="title">Auto Divider</h1>
	</ion-header-bar>

	<ion-content>
	<ion-list>
	<div auto-list-divider auto-list-divider-value="{{item.user.name.first}}" class="item item-avatar" ng-repeat="item in items">
	<img src="{{item.user.picture.thumbnail}} " />
	<h2>{{item.user.name.first}} {{item.user.name.last}}</h2>
	<p>{{item.user.location.city}} {{item.user.password}}</p>
	</div>
	<!--<ion-item auto-list-divider auto-list-divider-value="{{item.user.gender}}" auto-list-divider-function="dividerFunction" class="item-avatar" ng-repeat="item in items">
	<img src="{{item.user.picture.thumbnail}} " />
	<h2>{{item.user.name.first}} {{item.user.name.last}}</h2>
	<p>{{item.user.location.city}} {{item.user.password}}</p>
	</ion-item>-->
	</ion-list>
	</ion-content>

	</body>
	</html>
	angular.module('ionic.ion.autoListDivider',[])

	.directive('autoListDivider', function($timeout) {
	var lastDivideKey = "";

	return {
	link: function(scope, element, attrs) {
	var key = attrs.autoListDividerValue;

	var defaultDivideFunction = function(k){
	return k.slice( 0, 1 ).toUpperCase();
	}

	var doDivide = function(){
	var divideFunction = scope.$apply(attrs.autoListDividerFunction) \|\| defaultDivideFunction;
	var divideKey = divideFunction(key);

	if(divideKey != lastDivideKey) {
	var contentTr = angular.element("<div class='item item-divider'>"+divideKey+"</div>");
	element[0].parentNode.insertBefore(contentTr[0], element[0]);
	}

	lastDivideKey = divideKey;
	}

	$timeout(doDivide,0)
	}
	}
	});

	angular.module('ionicApp', ['ionic','ionic.ion.autoListDivider'])

	.factory('PersonService', function($http){
	var BASE_URL = "http://api.randomuser.me/";
	var items = [];

	return {
	GetFeed: function(){
	return $http.get(BASE_URL+'?results=30').then(function(response){
	items = response.data.results;
	return items;
	});
	}
	}
	})
	.controller('MyCtrl', function($scope, $timeout, PersonService) {
	$scope.items = [];

	PersonService.GetFeed().then(function(items){
	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;
	})

	/*
	items.sort(function(a,b){
	var textA = a.user.gender.toUpperCase();
	var textB = b.user.gender.toUpperCase();
	return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
	})*/

	$scope.dividerFunction = function(key){
	return key;
	}

	$scope.items = items;
	});

	});
	body {
	cursor: url('http://ionicframework.com/img/finger.png'), auto;
	}