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

ionic-v1
1

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 http://www.raywenderlich.com/78550/beginning-ios-collection-views-swift-part-1

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?

2

hi,

u can use the grid layout in the collection-repeat

http://ionicframework.com/docs/api/directive/collectionRepeat/

3

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:

image
Screen Shot 2015-01-28 at 2.42.21 PM.png906×706 195 KB

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:

<ion-content>
   <div class="item my-image-item"
         collection-repeat="recipe in recipes"
         collection-item-width="'25%'"
         collection-item-height="'25%'">
         <img ng-src="{{ recipe.feature_img }}">
         <h2>{{ recipe.name }}</h2>
    </div>
</ion-content>

This is the factory service:

.factory('RecipesFactory', function() {
var Recipes = {};
Recipes.data = [{
	  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() {
	return Recipes.data;
};
})

Controller:

$scope.recipes = RecipesFactory.GetAllRecipes();

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

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.

4

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

2 Likes
5

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
6

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

Thanks for the hardwork.

7

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

8

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