Angularjs issue $ http.get не работает

Я создаю мобильное приложение, используя фрейм ионный, который построен на AngularJS.

Я пытаюсь загрузить изображение в свое приложение из файла JSON, но я не могу загрузить его правильно.

Может ли кто-нибудь помочь мне?

Вот мой HTML:

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()"> 
    <ion-content> 
     <div class="col col-25" ng-repeat="image in images"> 
      <img ng-src="{{images}}" width="100%" /> 
     </div> 
    </ion-content> 
</ion-view>

Вот мой JavaScript:

.controller("photoCtrl", function($scope, $http) {  
    $scope.data = []; 

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

источник

2015-07-06 smither123

Какая ошибка вы получаете в 'console'? – Tushar

Также изображение 'ng-repeat =" в изображениях "' to 'ng-repeat =" образ в данных "' – Icycool

Я не получаю никаких ошибок в консоли. Я изменил изображение на данные и все еще не могу заставить его работать. Должны ли быть изображения в данных? – smither123

Здесь есть несколько вопросов. Во-первых, ваш вызов API возвращает объект с единственным свойством, называемым образами (а не массивом). Во-вторых, вы не обращаетесь к нему в своем HTML, потому что это будет {{ data.images }}, так как ваш член $scope называется data.

Итак, первое, что вам нужно сделать, это вернуть API массив. Если вы сделаете это, то используйте этот HTML:

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()"> 
    <ion-content> 
     <div class="col col-25" ng-repeat="image in data.images"> 
      <img ng-src="{{image}}" width="100%" /> 
     </div> 
    </ion-content> 
</ion-view>

И это JavaScript:

.controller("photoCtrl", function($scope, $http) { 
    $scope.getImages = function() { 
     $http.get('https://api.myjson.com/bins/30vuu') 
      .success(function(data) { 
       $scope.data = data; 
      }) 
      .error(function() { 
       alert("Not working"); 
      }); 
    }; 
});

Если вы только хотите, чтобы ваш API вернуть одно изображение, то это так же просто, как это для HTML :

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()"> 
    <ion-content> 
     <div class="col col-25"> 
      <img ng-src="{{ data.images }}" width="100%" /> 
      <!-- data.images because that's the name returned by the API call --> 
     </div> 
    </ion-content> 
</ion-view>

JavaScript не нуждается в изменении от того, что у меня выше;

источник

2015-07-06 12:11:53 kiswa

Спасибо за ответ. Я создал codepen: http://codepen.io/beefman/pen/KpoNjz Я до сих пор не могу заставить его работать. Я бы хотел, чтобы api возвратил много изображений, но это всего лишь пример json. – smither123

@ smither123 Это потому, что ваш вызов API по-прежнему возвращает объект с свойством, называемым образами, которое является строкой, а не массивом. http://codepen.io/anon/pen/GJxrob – kiswa

Пожалуйста, измените

<img ng-src="{{image}}" width="100%" />

вместо

ng-src="{{images}}"

источник

2015-07-06 11:46:53 Vineet

Изменить до ?? – smither123

@ smither123 вы зацикливаете изображения с помощью ng-repeat, а изображение - это значение. –

Angularjs issue $ http.get не работает

ответ

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