Getting Images in the form of Grid in AngularJS

Question

How to display all the images in the form of grid, which all will come from back end, so the images are in the dynamic form. and I have to put Description as well on those images, and those Description are also coming from Back End in AngularJS?

Can you give example of what you have tried?

Mayank Patel
– Mayank Patel

2017-02-06 10:59:16 +00:00
Commented Feb 6, 2017 at 10:59 — Mayank Patel
– Mayank Patel, Commented Feb 6, 2017 at 10:59

Anurag Jaiswal · Accepted Answer · 2017-02-06 11:32:15Z

4

If image data is coming in array then you can show image using ng-repeat directive.

Controller

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.imageList = allImage;
});

HTML

<div class="col-md-3" ng-repeat="image in imageList track by $index">
    <img src="{{image.imageUrl}}" />
    <label> {{image.description}} </label>
</div>

edited Feb 6, 2017 at 11:32

answered Feb 6, 2017 at 11:18

Anurag Jaiswal

865 bronze badges

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

Comments

ZearaeZ · Accepted Answer · 2017-02-06 11:08:39Z

1

You can use ng-repeat for showing you image with description like:

<li class="col-sm-3" ng-repeat="product in productList">
                        <img src={{product.imageUrl}} />
                        <label>{{product.description}}</label>
                    </li>

Here is the documentation

answered Feb 6, 2017 at 11:08

ZearaeZ

9059 silver badges21 bronze badges

Collectives™ on Stack Overflow

Getting Images in the form of Grid in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related