如何从角度js中的json数据中提取一张图像？答案

【问题标题】：how to pull one image from json data in angular js?如何从角度js中的json数据中提取一张图像？
【发布时间】：2015-07-09 17:37:00
【问题描述】：

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 中提取所有图像。如何在一个视图中获取一个图像的所有细节，在另一个视图中获取第二个图像的所有细节？？？我必须在哪里进行更改？我需要指定索引号吗？

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

【问题讨论】：

你能分享你有 ng-repeat 指令的整个代码块吗？
您应该使用 OP 中的代码扩展您的答案，而不是将其粘贴为注释，因为它没有样式。无论如何，如果您只想一次显示一张图像，为什么要使用 ng-repeat 指令？这是正确的，还是我误解了页面的行为方式？
它已经写好了我已经使用 ng-repeat 来拉取所有图像。现在我只想要一个视图上的一个图像。我没有使用 ng-repeat 一个图像....检查上面的代码.
抱歉，您共享了 2 行 html 代码，这就是为什么我不清楚页面应该是什么样子的原因。如果你想提取所有图像，但一次只显示一个，那么你不需要使用 ng-repeat 指令。您可以使用 ng-model 将 img html 元素与模型（例如 $scope.image）绑定。

标签： html css json angularjs

【解决方案1】：

在您的控制器中，使用 $scope.index=0;

在视图中使用

加载图像

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

要在同一个视图中加载下一张图片，请放置一个下一步按钮并在点击功能中更改索引

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

【讨论】：

感谢您的回答，但它不起作用没有图像显示在视图中...我认为指定索引号不起作用

【解决方案2】：

跟进上面的 cmets，检查此问题已解决的SO post。

【讨论】：