1

I have the following code using angularjs, I am aiming to display images located in img/gallery/ and the image names are numbed from 1 to 40 in hopes to call them in a loop. I thought this code would work but it only displays the first image for some reason. 

    <div id="links" ng-init="inc = [
    { name: 1,name: 2,name: 3,name: 4,name: 5,name: 6,name: 7,name: 8,
    name: 9,name: 10,name: 11,name: 12,name: 13,name: 14,name: 15,name: 16,
    name: 17, name: 18,name: 19,name: 20,name: 21,name: 22,name: 23,name: 24,
    name: 25,name: 26, name: 27,name: 28,name: 29,name: 30,name: 31,name: 32,
    name: 33,name: 34,name: 35, name: 36,name: 37,name: 38,name: 39,name: 40}]">  

     <div ng-repeat="i in inc"> 
      <a ng-href="img/gallery/{i.name}.jpg" title="AnsarDay" data-gallery>
       <img ng-src="img/gallery/{{i.name}}.jpg" alt="ansarday" 
       height="100" width="100">
      </a>
     </div>

    </div>
lightbots
  • 485
  • 3
  • 13
  • http://stackoverflow.com/questions/11873570/angularjs-for-loop-with-numbers-ranges this may provide some insight – royhowie Sep 11 '14 at 01:41
  • Doing '
    ' works but makes the images one above the other, vertically instead of one next to the other. Hmm. Also not sure why the way I did it does not work.
     – lightbots Sep 11 '14 at 02:24
  • in your CSS, add `display: inline-block;` to `img`. You might also want to add some margins/padding to have some space between the images. – royhowie Sep 11 '14 at 02:28
  • I took the ng-repeat out of the div and into the a tag, now it displays the images side by side. – lightbots Sep 11 '14 at 02:31

1 Answers1

0

Use 'ng-repeat="i in [1,2,3,....,n]" instead.

<div id="links"> 
 <a ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,
   11,12,13,14,15,16,17,18,19,20,21,22,23,24,
   25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40]" 
   href="img/gallery/{{i}}.jpg" title="AnsarDay" data-gallery>
  <img ng-src="img/gallery/{{i}}.jpg" alt="ansarday" height="150" width="150">
 </a>
</div>
lightbots
  • 485
  • 3
  • 13