how to pull one image from json data in angular js?

Question

html:- i have used ng-repeat to get all images.what should i add to get only single image.

<img class="size" ng-src="{{image.image}}" />

css:- i want to specify the size of image.

.size
{
margin-left:0.3em;
width:11em;
height:11em;
border:0.4em solid #B90504;
}

js:- i have used this code to pull all images from json. how can i get all the details of one image in one view and second image in another view??? where do i have to made changes??Do i need to specify the index number?

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

json:-

{ 
 "items":[
           {

                "name": "chocolate",
                "price": 12.99,
                "description": ["string","string"],
                "category": "cakes",
                "image": "../img/product1.JPG"
           },

           {

                "name": "chocolate",
                "price": 12.99,
                "description": ["string","string"],
                "category": "cakes",
                "image": "../img/product2.JPG"
           },

           {

                "name": "chocolate",
                "price": 12.99,
                "description": ["string","string"],
                "category": "cakes",
                "image": "../img/product3.JPG"
           }
        ]
    }

can you share the whole code block where you have the ng-repeat directive? — Luis Delgado
– Luis Delgado, Commented Jul 9, 2015 at 17:46
<img class="size" ng-repeat="image in images" ng-src="{{image.image}}" ng-hide="image+1 in image" /> — Pallavi
– Pallavi, Commented Jul 9, 2015 at 18:21
you should expend your answer with the code in the OP, instead of pasting it as a comment, as it has not styling. Anyway, why are you using the ng-repeat directive, if you just want to show one image at a time? Is that correct, or have I misinterpreted how the page should behave? — Luis Delgado
– Luis Delgado, Commented Jul 9, 2015 at 18:28
its already written i have used ng-repeat for pulling all images.now i want only one image on one view.i am not using ng-repeat fo one image....check the above code. — Pallavi
– Pallavi, Commented Jul 9, 2015 at 18:55
sorry, you've shared 2 lines of html code, that's why it's unclear to me how the page should look like. If you want to pull all images, but display only one at a time, then you don't strictly need to use the ng-repeat directive. You can bind an img html element with a model (such as $scope.image) by using ng-model. — Luis Delgado
– Luis Delgado, Commented Jul 9, 2015 at 19:08

Dazz · Accepted Answer · 2015-07-09 17:45:18Z

0

In your controller, use $scope.index=0;

in view load images using

<img class="size" ng-src="{{items[index].image}}" />

for next image to load in the same view put a next button and change the index in click function

<button ng-click="next()" >Load Next Image </button>
      $scope.next = function(){
            $scope.index=$scope.index+1;
        }

answered Jul 9, 2015 at 17:45

Dazz

6291 gold badge10 silver badges24 bronze badges

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

1 Comment

Pallavi Over a year ago

thanks for answer but its not working no image is showing on view...i dnot think specifying index number is working

Community · Accepted Answer · 2017-05-23 12:21:46Z

0

Following up on the comments above, check this SO post where this problem was solved.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jul 9, 2015 at 19:33

Luis Delgado

3,7445 gold badges37 silver badges55 bronze badges

Collectives™ on Stack Overflow

how to pull one image from json data in angular js?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related