在网页的轮播中访问本地 json 文件的图像答案

【问题标题】：Access images of local json file in a carousel on web page在网页的轮播中访问本地 json 文件的图像
【发布时间】：2018-06-05 15:59:40
【问题描述】：

我哪里出错了？ 我不知道如何在网页上的轮播中访问 JSON 文件的图像。

index.html

<!-- Wrapper for slides -->
<div class="carousel-inner">

     <div class="item active" ng-repeat = "carousel in carousels">
         <div class ="item" ng-repeat = "image in carousel.data_list">
        <img ng-src="{{image.img}}" alt="">
      </div>
      </div>
</div>

data.json

{
    "view_type": 1,
    "position": 1,
    "data_list": [
        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
                   teens/goli_kota.jpg",
            "name":"http://www.golivadapav.com/"
        },
        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
                          teens/allen1.jpg",
            "name":"https://www.allen.ac.in/"
        },
        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
              teens/goli_ald.jpg",
            "name":"http://www.golivadapav.in/"
        },
        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
               teens/ali4.png",
            "name":"https://www.aliexpress.com/"
        }

    ]}

app.js

var app = angular.module('carouselApp', []);

app.controller('carouselController', function($scope, carouselsFactory){
    $scope.carousels;

    carouselsFactory.getCarousels().then(function(response){
       $scope.carousels = response.data; 
    });

    $scope.sayHello = function(){
        console.log("Hello");
    }
});

app.factory('carouselsFactory', function($http){

    function getCarousels(){
        return $http.get('data.json');
    }

    return {
        getCarousels: getCarousels
    }
});

【问题讨论】：

您能否更具体地说明什么不起作用以及您尝试过什么？谢谢。
我尝试在网页的轮播中访问本地 data.json 文件的图像，但无法访问轮播中的图像。

标签： angularjs json ajax

【解决方案1】：

$scope.carousels 是一个对象，而 ng-repeat 作用于数组。

这应该是预期的代码

<div class="item active">
    <div class ="item" ng-repeat = "image in carousel.data_list">
        <img ng-src="{{image.img}}" alt="">
    </div>
</div>

【讨论】：