CODEWITHSUNDEEP
jsonangularjs
Pallavi
Pallavi

Reputation: 85

How to pull image from json to html in angular js without using rest?

I want to pull image from JSON database to show it in image slider. JSON is:-

{ "items" : [ { "img": "img/product1.JPG", "alt" : "Image 1" }, { "img": "img/product2.JPG", "alt" : "Image 2" }, { "img": "img/product3.JPG", "alt" : "Image 3" }, { "img": "img/product4.JPG", "alt" : "Image 4" }, { "img": "img/product5.JPG", "alt" : "Image 5" }, { "img": "img/product6.JPG", "alt" : "Image 6" } ] }

html:- 

<div id="image_slider" class="img_slider">
     <img src={{items}} />
</div>

css:- #image_slider .item{ padding: 30px 0px; background: #a1def8; display: block; margin: 5px; color: #FFF; border-radius: 3px; text-align: center; }

controller:- This is jquery code.I want to convert that code in AngularJs.I am new to angular.So can anyone help me in this?

//$scope.document.ready(function($scope) {
 app.directive('image_slide', function($scope) {

     $scope.document.ready(function($scope) {
  ("#image_slider").img_slider({
    jsonPath : 'data/imageSlider.json',
    jsonSuccess : customDataSuccess
  });

  function customDataSuccess(data){
    var content = "";
    for(var i in data["items"]){

       var imgs = data["items"][i].imgs;
       //var alt = data["items"][i].alt;

       content += "<img src=" + "" +imgs+ "/>";
      /* <img src="img/product1.JPG"/>*/
    }
    $("#image_slider").html(content);
  }
});

});

Upvotes: 1

Views: 2552

Answers (1)

Agop
Agop

Reputation: 1917

The concepts you need to use here are $http and ng-repeat.

For example, you'd fetch your data like this:

$http.get('data/imageSlider.json')
  .success(function(data, status, headers, config) {
    $scope.images = data.items;
  });

And then you'd display it like this:

<img ng-repeat="image in images" ng-src="{{image.img}}" alt="{{image.alt}}" />

Here's a full example on Plunker.

Upvotes: 1

Related Questions