Show images from array in Angularjs

Question

Images path are stored in database and I am fetching them from http request. Data is in array format.

Sample data:

{"success":true,"img":["portfolio_img\/40306762187.jpg","portfolio_img\36272080187078.jpg","portfolio_img\/36211374209814.jpg","portfolio_img\/36272058183542.jpg"]}

I am want to show those images in html page.

Here is the http request code.

var formApp = angular.module('formApp', []);

formApp.controller('getprofile', function($scope,$http){
     $http({
                            url: 'get_pics.php',
                            method: "GET",
                            params: {uid: uid}
                         })
                    .success(function(data) {

                        if (data.success) {

            //forEach($scope.data,function(value,index){
             //   alert(value.img);
            //})                           
                        }
                    });
                     })

HTML code is here.

<div ng-controller ="getprofile">
<div class="row"><div id="grid">
<fieldset ng-repeat="choice in choices"> (Need to modify)
<div class="col-xs-3 thumbnail">
<img src="" ng-src="{{imageUrl}}" ng-model="choice.course">(Need to modify)
</div>
</fieldset>
</div></div>
   </div>

I am still working on code. So, there should be some error and typos.

So, what's your problem?

Salih Erikci
– Salih Erikci

2017-02-04 07:49:09 +00:00
Commented Feb 4, 2017 at 7:49 — Salih Erikci
– Salih Erikci, Commented Feb 4, 2017 at 7:49
I am not able to show images. Thats the problem

Roxx
– Roxx

2017-02-04 08:03:11 +00:00
Commented Feb 4, 2017 at 8:03 — Roxx
– Roxx, Commented Feb 4, 2017 at 8:03
assign img in imageUrl variable

Pramod Patil
– Pramod Patil

2017-02-04 08:06:10 +00:00
Commented Feb 4, 2017 at 8:06 — Pramod Patil
– Pramod Patil, Commented Feb 4, 2017 at 8:06

Manish Rane · Accepted Answer · 2017-02-04 08:20:18Z

1

Try this,

 var formApp = angular.module('formApp', []);

 formApp.controller('getprofile', function($scope,$http){
 $http({
                        url: 'get_pics.php',
                        method: "GET",
                        params: {uid: uid}
                     })
                .success(function(data) {

                    if (data.success) {

                      angular.forEach(data,function(value,index){ // Angular foreach
                        $scope.images = data.img; // data in images scope variable.
                      })                           
                    }
                });
                 })

In HTML

    <div ng-controller ="getprofile">
       <div class="row"><div id="grid">
       <!-- loop images scope variable -->
       <fieldset>
        <div class="col-xs-3 thumbnail" ng-repeat="imageUrl in images">
         <img src="" ng-src="{{imageUrl}}" ng-model="choice.course">
        </div>
      </fieldset>
    </div></div>
   </div>

edited Feb 4, 2017 at 8:20

answered Feb 4, 2017 at 8:00

Manish Rane

5792 gold badges5 silver badges16 bronze badges

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

6 Comments

Manish Rane Over a year ago

dont know why??

Roxx Over a year ago

it is not showing in a row. you can see col-xs-3 i am using but all images are showing in separate fieldset.

Manish Rane Over a year ago

you need to remove loop from fieldset and add it to <div class="col-xs-3 thumbnail">, Edited answer

Roxx Over a year ago

i voted up. testing it now. will accept once it works.

Roxx Over a year ago

one more help required. can i use two ng-repeat? i need to use thumbnail and image in a div. thumbnail in a href and image in img src. data is separate in database and it is coming from database as array. any advise u can give.

|

Collectives™ on Stack Overflow

Show images from array in Angularjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related