0

I need to be able to arrange a list of images (4 in my case) to a row and the link text to appear below like so:

row1
image1          image2           image3         image4
linkText1       linkText2        linkText3      linkText4

row2 
image5          image6....
linkText5       linkText6.....

and so for however many images are. Here whether you click on the image or on its linkText, its supposed to open a document in a new window.

Here's the html that I intend, but doesn't work the way I want. It just puts one image per row. I have tried various combinations nothing seems to work. Although if I use just the img element and use the ng-repeat on it, the images flow the way I want, 4 to a row, but that doesn't serve my purpose as I want the link text as well below each image.

    <div ng-repeat="items in DocImageCollection ">
        <div ng-repeat="row in items">
          <img alt="{{row.linkText}}" 
ng-click="$event.preventDefault();openDocument({{row}});" ng-src="{{row.imageSrc}}" imageonload />
          <br />
          <span ng-click="$event.preventDefault();openDocument({{row}});"> 
           {{row.linkText}}</span>
         </div>
    </div>

Here imageonload is a directive which I have created for downloading the image source, DocImageCollection - is the main collection; for e.g. if I have 10 images in all, then this will be an object array of capacity = 3, where each array element (row) is itself an array of 4 image objects I have all the data correct, I just have issue in the templating. Any help is greatly appreciated.

user428602
  • 47
  • 2
  • 11

2 Answers2

0

you can use an indexing method with your ng-repeat.

Check this

Adapted from here

ps. Not necessarily you will use the ng-if, this only serves you in case you want to only show multiples of 4

Community
  • 1
  • 1
bobleujr
  • 1,179
  • 1
  • 8
  • 23
  • Will this work with image and a link text below each image, with the indexing method that you have suggested? Sample would be greatly appreciated. – user428602 Sep 01 '15 at 00:32
  • It will work. You just have to place them both inside the same element and arrange the layout to be one on top the of the other. Also, watch for the sum of your images sizes and your screen canvas, it might cut some images out. I am sorry but I am kinda in the middle of something and won't be able to create you an example right now, but it should be pretty quick. – bobleujr Sep 01 '15 at 00:38
0

The div tag is a block level element so it'll appear on it's own line unless you change the CSS display attribute to inline-block. Specifically, you need to target the display attribute for the div that contains the img and link.

Here's an example on codepen:
http://codepen.io/gwmccull/pen/LpYLLp

Garrett McCullough
  • 980
  • 7
  • 15