Ich bin ziemlich neu in Angular und habe Probleme mit dem $ http-Service, um eine GET-Anforderung für Bilder in JSON (nur eine einfache Reihe von Bildern) zu machen. Für jedes Bild möchte ich das wiederholen und sie zu meinem ng-src hinzufügen. Ich versuche ein ähnliches Layout wie Instagram zu erreichen.ng-Wiederholung nicht durch die Liste der Bilder in JSON
Also ich denke, der $ http.get Teil ist korrekt, wo ich es in $ scope.imageUrls speichern, und von dort aus ich es durchlaufen mit ng-repeat. Dann von dort, für jede Iteration, stecke ich das in ng-src in meinem img-Tag und ich weiß nur nicht, wie man von dort debuggt.
HTML:
<div class="posts" ng-controller="PostController">
<div class="post" ng-repeat="imageUrl in imageUrls">
<img class="photo" ng-src="{{imageUrl}}" />
<div class="post-box">
<div><span class="likes"> # </span> Likes</div>
</div>
</div>
</div>
JS:
var app = angular.module('instagram', []);
app.controller('PostController', ['$scope', '$http', function($scope, $http) {
$http.get('https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json')
.then(function (data) {
$scope.imageUrls = data;
console.log($scope.imageUrls);
});
}]);
versuchte ich verwendet console.log auf Fehler zu überprüfen, aber die Daten scheint es zu sein. Liefert es nur den Datenblock und nicht jedes Element/Bild im JSON?
Überprüfen der Konsole: console.log($scope.imageUrls)
Ich habe auch versucht mit {{}} imageUrl.url als ng-src aber das schien Fehler als auch auslösen. Ich habe ein Plnrkr eingerichtet: http://plnkr.co/edit/yQpCIRp9FHdDHTMA1HCL?p=preview
Das hat mich für eine Weile abgehört, also wenn Sie helfen können, danke!
Versuchen Sie, Ihre Zuordnung zu '$ scope.imag Ändern eUrls = data.data'. Wie Sie in der Ausgabe von 'console.log' sehen können, befindet sich Ihr Array von Bildern im Attribut 'data'. – fracz