Collection-repeat with images & ng-href (Help!)


#1

I consider myself a complete newbie with ionic and angular so please be merciful :smile:

I have a project where I want to display a grid of images that fills the available screen space and I found a good example in the ionic docs, so far so good.

This is the example:

I’m actually displaying a list of album covers and have some id’s and other info associated with my album object.

This is all good and the cover images display and nicely fill the space.

Now the problem is I try to add a ng-href="#/app/home/{{album.id}}" so that when the image of the album cover is clicked on the user goes to the album view by ID but clicking on one of the images does nothing.

I can manually enter the url with image ID and it loads fine with ionic-serve

I tried changing the href to something like www.google.com, still does nothing.

So I messed around for a while and came up with this:

<ion-item collection-repeat="album in albumList"
     item-height="150px" item-width="150px"
     ng-href="#/app/home/{{album.id}}">
     <img ng-src="{{getCoverArt(album.id)}}">
</ion-item>

This works as a click on a cover does take me through to the album view BUT the display goes from being a nice grid that fills the screen to having odd grey borders and what looks like padding added to the left and top of each item. If I could get rid of the weird grey borders and padding this would probably work ok, but the first solution as in the docs seems better but just doesn’t work with a link no matter what I do.

This may well be something really simple but I have been banging my head on the desk all day and need some guidance.

Thanks


#2

You could do this.

      <a ng-href="http://www.google.com" collection-repeat="photo in main.photos"
         item-height="33%" item-width="33%">
        <img ng-src="{{photo}}">
      </a>

#3

Haha as easy as that, I suspected it may be something simple that I had just completely overlooked.

This works perfectly, thanks!


#4

please whats the use of what i quote in collection-repeat=“photo in main.photos”


#5

Main.photos is an array object defined in the controller, could be any name you want as long as it corresponds to an array.

photo in just says for each item in the array create a list item called photo.

You can then have photo.name for example displayed on each row to show the name of the photo ( if that was a valid property for you array items).