Forked from Pulkit Singhal's Pen Ionic Grid Layout: v0.9.27 (public).
A Pen by four2theizz0 on CodePen.
Created
June 30, 2014 05:19
-
-
Save four2theizz0/bb13636d714ca5404d1a to your computer and use it in GitHub Desktop.
A Pen by four2theizz0.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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' | |
| ]; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment