four2theizz0/Ionic-Grid-Layout:-v0.9.27-(public).markdown

## index.html
<!--
 A simple starting template for Ionic Development.
-->
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Template</title>

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

    <div class="bar bar-header bar-assertive">
      <h1 class="title">bar-assertive</h1>
    </div>

    <ion-content has-header="true" padding="true">
        <div class="row" ng-repeat="row in items | inSlicesOf:2">
          <div class="col col-50" ng-repeat="item in row">
            <img ng-src="{{item}}" width="100px" height="100px">
            <hr/>
            <div>even: {{$even}} {{image}}</div>
          </div>
        </div>
    </ion-content>

  </body>
</html>

## Ionic-Grid-Layout:-v0.9.27-(public).markdown

      
    Raw
  

              Ionic-Grid-Layout:-v0.9.27-(public).markdown
            
          
    Ionic Grid Layout: v0.9.27 (public)

Forked from Pulkit Singhal's Pen Ionic Grid Layout: v0.9.27 (public).
A Pen by four2theizz0 on CodePen.
License.

  
## script.js
// References:
//https://groups.google.com/forum/#!topic/angular/LjwlVYMulN8
//By Rafael Dipold: http://jsbin.com/isagac/1/edit
angular.module('myApp', ['ionic'])

  .filter('inSlicesOf',
		['$rootScope',
		function($rootScope) {
			makeSlices = function(items, count) {
				if (!count)
					count = 3;

				if (!angular.isArray(items) && !angular.isString(items)) return items;

				var array = [];
				for (var i = 0; i < items.length; i++) {
					var chunkIndex = parseInt(i / count, 10);
					var isFirst = (i % count === 0);
					if (isFirst)
						array[chunkIndex] = [];
					array[chunkIndex].push(items[i]);
				}

				if (angular.equals($rootScope.arrayinSliceOf, array))
					return $rootScope.arrayinSliceOf;
				else
					$rootScope.arrayinSliceOf = array;

				return array;
			};

			return makeSlices;
		}]
	)

.controller('MyCtrl', function($scope) {
  $scope.myTitle = 'Template';
  $scope.items = [
    'http://assets.eatingwell.com/sites/default/files/imagecache/standard/recipes/BV7560.jpg',
    'http://www.notempire.com/images/uploads/coffee-intox.jpg',
    'http://www.lookytasty.com/wp-content/uploads/2012/08/baileysncream300.jpg',
    'http://cafesguide.com/assets/pages/6a/4e/6a4e4c935103dd9b2e98200e36422174_330.jpg',
    'http://i6.cdnds.net/12/38/450x450/baileys-latte.jpg',
    'http://www.koktelbar.ru/images/vict4.jpg',
    'http://www.diyinspired.com/wp-content/uploads/2012/01/baileys-coffee.jpg',
    'http://www.spiritdrinks.com/img/drinks/lg/baileyscoffee.jpg',
    'http://www.spiritdrinks.com/img/drinks/lg/AlpineBaileys.jpg'
  ];
});

## style.css
body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
	<!--
	A simple starting template for Ionic Development.
	-->
	<html ng-app="myApp">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<title>Ionic Template</title>

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

	<div class="bar bar-header bar-assertive">
	<h1 class="title">bar-assertive</h1>
	</div>

	<ion-content has-header="true" padding="true">
	<div class="row" ng-repeat="row in items \| inSlicesOf:2">
	<div class="col col-50" ng-repeat="item in row">
	<img ng-src="{{item}}" width="100px" height="100px">
	<hr/>
	<div>even: {{$even}} {{image}}</div>
	</div>
	</div>
	</ion-content>

	</body>
	</html>
	// References:
	//https://groups.google.com/forum/#!topic/angular/LjwlVYMulN8
	//By Rafael Dipold: http://jsbin.com/isagac/1/edit
	angular.module('myApp', ['ionic'])

	.filter('inSlicesOf',
	['$rootScope',
	function($rootScope) {
	makeSlices = function(items, count) {
	if (!count)
	count = 3;

	if (!angular.isArray(items) && !angular.isString(items)) return items;

	var array = [];
	for (var i = 0; i < items.length; i++) {
	var chunkIndex = parseInt(i / count, 10);
	var isFirst = (i % count === 0);
	if (isFirst)
	array[chunkIndex] = [];
	array[chunkIndex].push(items[i]);
	}

	if (angular.equals($rootScope.arrayinSliceOf, array))
	return $rootScope.arrayinSliceOf;
	else
	$rootScope.arrayinSliceOf = array;

	return array;
	};

	return makeSlices;
	}]
	)

	.controller('MyCtrl', function($scope) {
	$scope.myTitle = 'Template';
	$scope.items = [
	'http://assets.eatingwell.com/sites/default/files/imagecache/standard/recipes/BV7560.jpg',
	'http://www.notempire.com/images/uploads/coffee-intox.jpg',
	'http://www.lookytasty.com/wp-content/uploads/2012/08/baileysncream300.jpg',
	'http://cafesguide.com/assets/pages/6a/4e/6a4e4c935103dd9b2e98200e36422174_330.jpg',
	'http://i6.cdnds.net/12/38/450x450/baileys-latte.jpg',
	'http://www.koktelbar.ru/images/vict4.jpg',
	'http://www.diyinspired.com/wp-content/uploads/2012/01/baileys-coffee.jpg',
	'http://www.spiritdrinks.com/img/drinks/lg/baileyscoffee.jpg',
	'http://www.spiritdrinks.com/img/drinks/lg/AlpineBaileys.jpg'
	];
	});
	body {
	cursor: url('http://ionicframework.com/img/finger.png'), auto;
	}