html - 如何从 Angular js中的json数据中提取一张图像？

Question

html:- 我已经使用 ng-repeat 获取所有图像。我应该添加什么才能只获取单个图像。

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

css:- 我想指定图像的大小。

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

js:- 我已经使用这段代码从 json 中提取所有图像。我怎样才能在一个 View 中获取一张图像的所有细节，在另一个 View 中获取第二张图像的所有细节？？？我必须在哪里进行更改？我需要指定索引号吗？

$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"
           }
        ]
    }

Answer 1

在你的 Controller 中，使用 $scope.index=0;

在 View 加载图像使用

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

为了在同一 View 中加载下一张图片，放置一个下一张按钮并更改点击功能中的索引

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