Question

我哪里错了？ 我没有得到如何在网页上的轮播中访问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
    }
});

Answer 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>

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

1 个答案: