2015-07-17 23 views
2

Я пытаюсь загрузить изображения из моего файла JSON в моем приложении, но я не могу заставить его работать:Ionic: Почему мои изображения не загружаются из моего json-файла?

Вот мой код:

ЯШ:

.controller('photoCtrl', function($scope, $ionicModal, $ionicBackdrop, $ionicScrollDelegate, $ionicSlideBoxDelegate, $http) { 
    $scope.images = []; 

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

HTML:

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" > 

    <ion-content ng-init="getImages()" class="center" class="has-header padding"> 

    <!-- start Under6/7/8/9s Photos --> 
    <div class="item item-divider"> 
     <i class="ion-images"></i> Under6/7/8/9s Photos 
    </div> 
    <a class="item item-list-detail"> 
     <ion-scroll direction="x"> 
     <img on-hold="onHold()" ng-repeat="image in images" ng-src="{{images.src}}" ng-click="showImages($index)" class="image-list-thumb" /> 
     </ion-scroll> 
    </a> 
</ion-content> 
</ion-view> 
+2

я вижу загрузка первых 3 изображений. Возможно, стоит создать минимальный пример, в котором вы загружаете изображения из своего JSON-файла без каких-либо причудливых вещей. Возможно, в JSON есть что-то не так, но может быть, это не файл JSON, который создает проблемы, но и другую часть. –

+0

О, opps, я добавил неправильный код! http://codepen.io/beefman/pen/QbBdVw – smither123

+0

@ smither123 У вас есть опечатка: 'ng-src =" {{\t image.src}} "'. –

ответ

1

Я думаю, причина в вашем JSON. Что вы ожидаете произойдет, когда итерация:

{"images":"http://cdn.caughtoffside.com/wp-content/uploads/2012/07/Marko-Marin.jpg"} 

Возможно ваш API должен возвращать массив объектов, как

[{"src":"http://cdn.caughtoffside.com/.../Marko-Marin.jpg"}, 
{"src":"http://cdn.caughtoffside.com/.../Johnny-Blue.jpg"}, 
... 
] 

Итерация над объектом обычно выглядит по-другому:

<div ng-repeat="(key, value) in myObj"> 
0

Попробуйте это:

<ion-scroll direction="x" ng-repeat="image in images"> 
    <img on-hold="onHold()" ng-src="{{image.src}}" ng-click="showImages($index)" class="image-list-thumb" /> 
</ion-scroll> 
+0

Не работает ни – smither123

+0

@ smither123 Вы уверены, что 'images' возвращает действительные данные? Можете ли вы открыть отладчик инспектора и посмотреть, генерирует ли код правильный HTML? –

+0

Я создал новый codepen с похожим json-файлом. Надеюсь, это поможет. http://codepen.io/beefman/pen/QbBdVw – smither123

Смежные вопросы