Angularjs issue $ http.get not loading image

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 с форматом ожидаемого шаблона.

Edit: Вот формат 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

Ваш контроллер должен быть, как это

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

    $scope.images = []; 

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

});