1

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"
           }
        ]
    }
Pallavi
  • 85
  • 4
  • 15
  • can you share the whole code block where you have the ng-repeat directive? – Luis Delgado Jul 09 '15 at 17:46
  • – Pallavi Jul 09 '15 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 Jul 09 '15 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 Jul 09 '15 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 Jul 09 '15 at 19:08
  • thanks for answer can you give me one example for it.i really feel this will work. – Pallavi Jul 09 '15 at 19:29

2 Answers2

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;
        }
Kumar Garapati
  • 619
  • 1
  • 10
  • 24
  • thanks for answer but its not working no image is showing on view...i dnot think specifying index number is working – Pallavi Jul 09 '15 at 19:04
0

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

Community
  • 1
  • 1
Luis Delgado
  • 3,644
  • 4
  • 34
  • 54