Iterate using Javascript to display multiple images in Html

Question

I'm using AngularJS for a webapp, I have a set of images stored on disk and I'm using rest services to retrieve the paths of the images on disk. Now on the client side I have an object which is an array containing the paths of the images.

I would like to know how to iterate this array using javascript on the html to display all the images that this array contains.

This is the code I tried but no luck so far:

<div id="products" data-ng-repeat="product in products">


<img alt=""  data-ng-src="{{product.pathToImage}}" height="300" width="200px">



</div>

Thank you very much in advance.

Have you tried anything? What sample code can you show us that might help? — Steve Robbins
– Steve Robbins, Commented Jan 15, 2015 at 21:46
And where is your javascript code? Have you looked at your console? — Michelangelo
– Michelangelo, Commented Jan 15, 2015 at 21:53
Yes sorry, I have checked to the console and I got Error: [$injector:unpr] Unknown provider: aProvider <- a <- productsFactoryHelper .So apparently the problem is related to minification not to the code itself, anyway the ng-repeat should go in the element that repeats as James Waddington said — fgonzalez
– fgonzalez, Commented Jan 15, 2015 at 22:19

James Waddington · Accepted Answer · 2015-01-15 22:00:40Z

1

Repeat should go on the element that repeats rather than the parent - try this:

<div id="products">
    <img alt="" data-ng-repeat="product in products" data-ng-src="{{product.pathToImage}}" height="300" width="200px">
</div>

Edit - corrected

answered Jan 15, 2015 at 22:00

James Waddington

2,9252 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lompa · Accepted Answer · 2015-01-15 21:56:04Z

0

I think that the attribute is ng-repeat rather than data-ng-repeat, have you the products at your $scope?

<div id="products" ng-repeat="product in products">
    <img alt="" ng-src="{{product.pathToImage}}" height="300" width="200px">
</div>

answered Jan 15, 2015 at 21:56

Lompa

1064 bronze badges

3 Comments

Michelangelo Over a year ago

Actually data-ng-repeat is the official way.

Lompa Over a year ago

@Mikey I didn't know it, where can I find the official way? Because I was using this documentation -> code.angularjs.org/1.3.9/docs/api/ng/directive/ngRepeat

Michelangelo Over a year ago

Here is some on the Angular page: docs.angularjs.org/guide/directive and there was also a topic stackoverflow.com/questions/20862713/…. Don't worry you are using the right documentation :)

Collectives™ on Stack Overflow

Iterate using Javascript to display multiple images in Html

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related