javascript - ng-repeat 不遍历 JSON 中的图像列表

Question

我是 Angular 的新手，在使用 $http 服务对 JSON 格式的图像(只是一个简单的图像数组)发出 GET 请求时遇到了问题。对于每张图片，我都想重复一遍并将它们添加到我的 ng-src 中。我正在尝试实现类似于 Instagram 的布局。

所以我认为 $http.get 部分是正确的，我将它存储到 $scope.imageUrls 中，然后我从那里使用 ng-repeat 遍历它。然后从那里开始，对于每次迭代，我将其插入到我的 img 标签中的 ng-src 中，我只是不知道如何从那里进行调试。

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);
    });
}]);

我尝试使用 console.log 检查错误，但数据似乎在那里。它只是返回数据 block 而不是 JSON 中的每个元素/图像吗？

检查控制台:console.log($scope.imageUrls)

我也尝试过使用 {{imageUrl.url}} 作为 ng-src 但这似乎也触发了错误。我设置了一个 Plnkr: http://plnkr.co/edit/yQpCIRp9FHdDHTMA1HCL?p=preview

这个问题困扰了我一段时间，所以如果你能帮忙，谢谢!

Answer 1

我更新你的plunker http://plnkr.co/edit/hNn1YdVh8w7l3dEgh3LU?p=preview :

在 $http 中，你会得到一个包含更多信息的响应，而不仅仅是数据。要获取数据，您必须这样做:

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

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

并且在 ng-repeat 中你必须通过参数添加轨道因为图像可以重复