CODEWITHSUNDEEP
javascripthtmlangularjs
fgonzalez
fgonzalez

Reputation: 3887

Iterate using Javascript to display multiple images in Html

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.

Upvotes: 0

Views: 823

Answers (2)

James Waddington
James Waddington

Reputation: 2905

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

Upvotes: 1

Lompa
Lompa

Reputation: 106

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>

Upvotes: 0

Related Questions