Question

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

我正在尝试开发的是一个从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

Answer 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'}]}

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

$scope.images = data.images

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

使用ng-repeat可以显示如下图像：

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

Answer 2

您的控制器应该是这样的

a[2]

Angularjs发出$ http.get没有加载图片

2 个答案: