How to modify Ion-List to look like a CollectionView?

Ion-List is great for mobile but how do modify the layout to a grid to make it look like iOS’ UICollectionView?

Here’s a reference with a picture of what the collection view looks like

I tried using the Ionic grid but it doesn’t really work. I was thinking of a third-party grid tool like Susy

I’m just quite unsure. Is there a better way of doing this?


u can use the grid layout in the collection-repeat

Okay, I checked it out, I read it and applied it to my code. colleciton-repeat directive doesn’t seem to work with ion-item because it doesn’t render anything when I changed from ng-repeat to collection-repeat I’ve also noticed that colleciton-item-width and collection-item-height doesn’t work with ng-repeat However, I didn’t find them to be a big problem until I used a div inside ion-content (replacing all the ion-list and ion-item so I could use collection-repeat with colleciton-item-width and collection-item-height). It seems that collection-repeat repeats items 25 times even when there are only 5 objects in an array. See this screenshot of Firefox’s Firebug:

The data shows correctly (all 5 items) when using ng-repeat in the div but collection-item-width and collection-item-height doesn’t work.

Going back to just using collection-repeat in a div like this:

   <div class="item my-image-item"
         collection-repeat="recipe in recipes"
         <img ng-src="{{ recipe.feature_img }}">
         <h2>{{ }}</h2>

This is the factory service:

.factory('RecipesFactory', function() {
var Recipes = {}; = [{
	  id: 1,
      name: "Stuffed Omelet",
      feature_img: './img/Photo Apr 08, 9 19 48 AM.png',
    }, {
      id: 2,
      name: "Snoopy Rice Ball",
      feature_img: "./img/Photo Apr 21, 11 00 11 AM.png",

      id: 3,
      name: "Tofu Salad",
      feature_img: "./img/Photo Apr 30, 10 54 44 AM.png",

      id: 4,
      name: "Airplane Cookie",
      feature_img: "./img/Photo Mar 10, 9 24 31 AM.png",

      id: 5,
      name: "Panda Rice Balls",
      feature_img: "./img/Photo Mar 03, 1 02 10 PM.png",

     Recipes.GetAllRecipes = function() {


$ = RecipesFactory.GetAllRecipes();

The items overlap each other. And this grid doesn’t show itself to be responsive.
See this screenshot:

Maybe I’m just not getting it but I did really try and followed the documentation. But I can’t find what I’m doing wrong or there’s probably a bug.

So collection repeat is going to be getting some extra attention soon, but as of now having a gird does with with it.

It does have some bugs in it at the moment, but you can have a grid


Awesome @mhartington! If you guys need help on testing, feedback or anything of this sort, in regards to collection-repeat feel free to ask me.

1 Like

@mhartington Okay now I’m wondering; when do you think you guys can release a better version of collection-repeat?

Thanks for the hardwork.

The next release cycles will be bug fixes.
No date at the moment, but we are working on it

Hi, I want to create collectionView in ionic with dynamic label content, would you help me?