Angularjs 问题 $http.get 未加载图像答案

【问题标题】：Angularjs issue $http.get not loading imageAngularjs 问题 $http.get 未加载图像
【发布时间】：2015-09-26 10:47:46
【问题描述】：

我正在尝试创建一个使用画廊的离子应用程序。我不确定为什么我的图像没有加载到应用程序中。

我正在尝试开发的是一个从 JSON 文件加载图像的画廊。

这是我的 HTML

<ion-view view-title="Gallery" align-title="center">

<ion-content ng-controller="photoCtrl" ng-init="getImages()">
    <div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length">
            <img ng-src="{{data.images[$index].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length">
            <img ng-src="{{data.images[$index + 1].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length">
            <img ng-src="{{data.images[$index + 2].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length">
            <img ng-src="{{data.images[$index + 3].src}}" width="100%" />
        </div>
    </div>
</ion-content>
</ion-view>

Javascript：

.controller("photoCtrl", function($scope, $http) {

    $scope.images = [];

    $scope.getImages = function() {
        $http.get('https://api.myjson.com/bins/30vuu')
            .success(function(data) {
                $scope.data = images;
            })
    }

});

我还创建了一个 codepen：http://codepen.io/beefman/pen/eNMgzG

【问题讨论】：

demo 没有返回图像数组，只是一个具有属性images 的对象，其中包含一个字符串。同样在您的$http 回调中，您没有对响应data 做任何事情，因此您将$scope.data 分配给空数组
html 也不匹配数据结构
我的 Javascript 应该是 $scope.images = data？另外我不确定为什么我的 html 与数据结构不匹配。当我使用
。有效吗？

标签： javascript jquery html angularjs ionic

【解决方案1】：

JSON API 返回一个关联数组（键值对），如下所示：

{"images":"http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg"}

但您的模板代码需要一个数组（列表）：

data.images[$index].src

所以我首先将您的 JSON 与您的模板预期的格式进行匹配。

编辑：这是一个符合您模板期望的 JSON 格式：

{'images': [{'src': 'url1'}, {'src': 'url2'}]}

另外，请确保在回调中正确设置 images 变量

$scope.images = data.images

现在 $scope.images 是键值对列表

使用 ng-repeat 你可以像这样显示图像：

<div ng-repeat="image in images">
  <img ng-src="image.src" />
</div>

【讨论】：

如何更改我的 JSON 格式以匹配我的 HTML？ "photos":[ {"images":"url"} ] - 类似的东西？那么在我的 html 中它会是 photos.data.images?
仍然无法正常工作。我尝试通过添加数组来更改我的 json 文件。在我的 HTML 中是否必须包含数组？ codepen.io/beefman/pen/eNMgzG
我看到 codepen 现在可以工作了（排序），你还有问题吗？
是的，由于某种原因，第四张图片没有加载。不知道为什么。我猜想与我的 HTML 有关。它正在工作的一部分。我检查了我的 JSON 文件，没问题。
现在已修复。缺少一个}

【解决方案2】：

你的控制器应该是这样的

.controller("photoCtrl", function($scope, $http) {

    $scope.images = [];

    $scope.getImages = function() {
        $http.get('https://api.myjson.com/bins/30vuu')
            .success(function(data) {
                $scope.images = data;
            })
    }

});

【讨论】：