CODEWITHSUNDEEP
angularjs
Roxx
Roxx

Reputation: 3986

Show images from array in Angularjs

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.

Upvotes: 1

Views: 685

Answers (1)

Manish Rane
Manish Rane

Reputation: 579

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>

Upvotes: 1

Related Questions