Has anyone managed to create a UI that handles an item list like the Pinterest iOS app? This is a two-wide list of variable height items. I was thinking of using the cards with fixed widths in a two column grid. Ideally each column would scroll independently.
I success to show list look like Pinterest app.
But I want to use “Collection repeat” to repeat my data
anyone can help, or advice !
Thank you.
Hi,
Can you please share your code to create a list with this design?
In order to use the collection repeat, you can can use this code in a factory :
.factory('Ads', function (LocalStorage, ErrorMessages) {
return {
all: function(scope) {
var ads = Parse.Object.extend("Ads");
var query = new Parse.Query(ads);
var adlist = [];
query.descending("createdAt");
query.limit(10);
query.find({
success: function(results) {
scope.$apply(function() {
var index =0;
var Arrlen=results.length ;
for (index = 0; index < Arrlen; ++index) {
var obj = results[index];
scope.ads.push({
img1 : obj.attributes.Img1,
title: obj.attributes.Title,
content: obj.attributes.Content
});
}
});
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
})
}
})
In the Controller :
$scope.ads = [];
$ionicPlatform.ready(function() {
Ads.all($scope);
});
And the html for for list :
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="ad in ads" class="item-thumbnail-left">
<img ng-src="data:image/jpeg;base64,{{ad.img1}}">
<h2>{{ad.title}}</h2>
<p>{{ad.content}}</p>
</ion-item>
</ion-list>