2016-06-16 13 views
1

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!

+0

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

Antwort

2

ich Ihre Plunker aktualisieren http://plnkr.co/edit/hNn1YdVh8w7l3dEgh3LU?p=preview:

In $ http erhalten Sie einen responsa, die weitere Informationen enthält, die nur Daten. Um Daten zu erhalten, müssen Sie es tun:

$http.get('https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json') 
    .then(function (response) { 
     $scope.imageUrls = response.data; 

     console.log($scope.imageUrls); 
    }); 

Und in ng-wiederholen Sie den Überblick durch das Argument hinzufügen muss, weil Bild Duplikat sein

2

Sie sind imageURLs auf ein Objekt einzustellen. Es muss ein Array sein.Wenn Sie in der Debugger Ihre Antwort suchen, ist dies:

enter image description here

Sie wollen, was in data.data (Sie sollten auch die imageUrls Variable definieren ($scope.imageUrls = []')

<!doctype html> 
<html ng-app="instagram"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Angular</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <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> 

    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <script> 
    var app = angular.module('instagram', []); 

    app.controller('PostController', ['$scope', '$http', function($scope, $http) { 
     $scope.imageUrls = []; 
     $http.get('https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json') 
     .then(function (data) { 
       $scope.imageUrls = data.data; 

     }); 
    }]); 


    </script> 
</body> 
</html> 
+0

Es ist nicht notwendig, über ein Array zu iterieren, nur um die Werte zu kopieren. Wir können einfach 'imageUrls = data.data;' zuweisen. – dYale

+0

Sie haben Recht. Diese Iteration wird nicht benötigt. Es ist bereits ein Array – mwilson

0

aktualisiert plunkr http://plnkr.co/edit/agVrWD8I4581a0702ehy?p=preview

Sie muss data.data

bekommen

und verwenden track by $index im ng-Wiederholung, weil Sie

<div class="posts" ng-controller="PostController"> 
    <div class="post" ng-repeat="imageUrl in imageUrls track by $index"> 
     <img class="photo" ng-src="{{imageUrl}}" /> 
     <div class="post-box"> 
     <div><span class="likes"> # </span> Likes</div> 
     </div> 
    </div> 
    </div> 
+1

wir schreiben nur die Antwort in der gleichen Zeit. – AlainIb

0

allererst in $ http Methode zu duplizieren haben die Antwortwert wird ein Objekt „Daten“ Element enthält, das die Daten, die Sie brauchen, ist so diese verwenden :
$scope.imageUrls = data.data;
dann haben Sie doppelte url Bild, in diesem Fall ng-repeat gibt stattdessen einen Fehler so verwenden:
<div class="post" ng-repeat="imageUrl in imageUrls track by $index">

+0

Wie unterscheidet es sich von Silvinus Antwort? – fracz

+0

@fracz Sie sind richtig, aber als ich meine Antwort tippte, beantwortete niemand diese Frage. – nayeri