在 angularjs 中从网页上的本地 JSON 文件访问图像答案

【问题标题】：Access images from local JSON file on the web page in angularjs在 angularjs 中从网页上的本地 JSON 文件访问图像
【发布时间】：2018-06-07 18:22:22
【问题描述】：

我哪里错了？

我想从网页上的 datahl.json 文件中访问图像，但无法访问它们。请检查代码并帮助我。如果可能，请参考 plunker 编辑器的解决方案。

index.html

        <div class="col-sm-4" ng-repeat = "hbl in hbls">
            <div class="thumbnail" ng-repeat = "h in hbl.data_list" 
                 style="width:100%;">
              <img ng-src="{{h.img}}" alt="" style="height:50vh;">
                 <div class="caption">   
                    <p><strong>{{h.name}}</strong></p>
                </div>
            </div>
        </div>

app.js这是我的js代码

 var app = angular.module('hostellApp', []);
app.controller('hostellController', function($scope, hblsFactory){
    $scope.hbls;

    hblsFactory.getHbls().then(function(response){
       $scope.hbls = response.data; 
    });

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

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

        function getHbls(){
            return $http.get('datahl.json');
        }

        return {
            getHbls: getHbls
        }
    });

datahl.json这是我的本地 JSON 文件

` {

    "view_type": 5,
    "title": "Hostels By Locality",
    "position": 5,
    "data_list":
   [

        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
                    teens/IMG_20180526_1139570.8091572935412125.jpg",
            "name": "Mahavir Nagar"
        },
        {
            "img": "https://graph.facebook.com/1666751513414902/picture? 
                          type=large",
            "name": null
        },
        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
                            teens/cropped1148015742983667713.jpg",
            "name": "New Rajiv Gandhi"
        },
        {
            "img": "https://s3.us-east-2.amazonaws.com/images-city- 
                         teens/cropped998427941.jpg",
            "name": "Jawahar Nagar"
        }

    ]
}`

【问题讨论】：

标签： angularjs json ajax

【解决方案1】：

从 JSON 文件中获取的数据不是数组而是对象。这意味着您只需要一个ng-repeat。

将您的第一个 ng-repeat 更改为 ng-repeat="h in hbls.data_list"（在 hbl 中添加一个“s”）并删除您的第二个 ng-repeat。

工作人员：https://plnkr.co/edit/OOd1M1dNFjSB7uaqZZB6?p=preview

【讨论】：