Using ng-repeat in HTML, how can I display only a single image instead of all images?
<img class="size" ng-src="{{image.image}}" />
In CSS, I aim to define the size of the image.
.size
{
margin-left:0.3em;
width:11em;
height:11em;
border:0.4em solid #B90504;
}
For JavaScript, after retrieving all images from a JSON file, how can I show the details of one image in one view and another image in a separate view? What modifications should I make and do I need to specify an index number?
$http.get('data/flatfile.json')
.success(function(data, status, headers, config) {
$scope.images = data.items;
});
The JSON structure is as follows:
{
"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"
}
]
}