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中提取所有图像。如何在一个视图中获取一个图像的所有细节，在另一个视图中获取第二个图像？我在哪里做出改变？我是否需要指定索引号？

$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

在您的控制器中，使用$ 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;
        }

Answer 2

对上述评论进行跟进，请查看此问题已解决的SO post。

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

2 个答案: