Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 18, 2015 15:21
Show Gist options
  • Save anonymous/3c9525f7296328a44056 to your computer and use it in GitHub Desktop.
Save anonymous/3c9525f7296328a44056 to your computer and use it in GitHub Desktop.
Download ZIP
ionic collection-repeat with variable height example
Raw
index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ionic collection-repeat with variable height example</title>
<script src="http://code.ionicframework.com/1.0.0-rc.1/js/ionic.bundle.js">
</script>
<style>
.my-item > div {
border-style: solid;
border-color: #999;
border-radius:4px;
border-width: 1px;
margin: 2px 4px;
padding: 10px;
box-sizing: border-box;
}
.scroll-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: auto;
height: auto;
}
[collection-repeat] {
left: 0 !important;
top: 0 !important;
position: absolute !important;
z-index: 1;
}
</style>
<script>
angular.module('ionicApp', ['ionic']).controller('CollectionCtrl', function ($scope) {
var i, items = [];
for (i = 0; i < 1000; i++) {
items.push({height: i * 92397.0 % 61 + 50});
}
$scope.items = items;
})
</script>
</head>
<body>
<h1>something else</h1>
<ion-content class="scroll-content">
<div ng-controller="CollectionCtrl">
<div class="my-item"
collection-repeat="item in items"
item-width="'100%'"
item-height="item.height">
<div ng-style="{height:item.height-6+'px'}">
item {{$index}} (height:{{item.height}})
</div>
</div>
</div>
</ion-content>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment