AngularJS問題$ http.get未加載圖像

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

另外，請確保在回調中正確設置images變量

$scope.images = data.images

現在$ scope.images是鍵值對的列表

使用ng-repeat可以顯示圖像，如下所示：

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

Answer 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;
            })
    }

});