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

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

因此，我认为$http.get部分是正确的，我将其存储到$scope.imageURL中，然后使用ng repeat对其进行迭代。然后，对于每一次迭代，我将它插入到我的img标记中的ngsrc中，我只是不知道如何从那里调试

HTML:

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

检查控制台：

我还尝试使用{{imageUrl.url}}作为ngsrc，但这似乎也会触发错误。我建立了一个Plnkr：

这困扰了我一段时间，如果你能帮忙，谢谢

我更新您的plunker:

在$http中，您会得到一个响应，其中包含更多只包含数据的信息。要获取数据，您必须执行以下操作：

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

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

在ng repeat中，您必须按参数添加轨迹，因为图像可以重复

  <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>

在$http中，您会得到一个响应，其中包含更多只包含数据的信息。要获取数据，您必须执行以下操作：

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

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

---

在ng repeat中，您必须按参数添加轨迹，因为图像可以重复

您正在将ImageURL设置为对象。它需要是一个数组。如果查看调试器，您的响应如下：

  <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>

您需要data.data中的内容还应定义imageUrls变量$scope.imageUrls=[]'

---

您正在将ImageURL设置为对象。它需要是一个数组。如果查看调试器，您的响应如下：

您需要data.data中的内容还应定义imageUrls变量$scope.imageUrls=[]'

更新的plunkr

你必须得到数据

并在ng repeat中使用track by$index，因为您有重复项

  <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>

更新的plunkr

你必须得到数据

并在ng repeat中使用track by$index，因为您有重复项

  <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>

---

首先，在$http方法中，响应值是一个包含数据元素的对象，该数据元素是您需要的数据，因此请使用以下方法： $scope.imageURL=data.data； 那么您就有了重复的图像url，在这种情况下，ng repeat返回一个错误，因此请改用这个：

---

首先，在$http方法中，响应值是一个包含数据元素的对象，该数据元素是您需要的数据，因此请使用以下方法： $scope.imageURL=data.data； 那么您就有了重复的图像url，在这种情况下，ng repeat返回一个错误，因此请改用这个：

---

尝试将分配更改为$scope.imageURL=data.data。从console.log的输出中可以看到，图像数组位于data属性中。请尝试将分配更改为$scope.imageUrls=data.data。正如您在console.log的输出中所看到的，您的图像数组位于data属性中。不需要迭代数组来复制值。我们可以简单地分配imageUrls=data.data；你说得对。这种迭代是不需要的。它已经是一个数组了，不需要迭代数组来复制值。我们可以简单地分配imageUrls=data.data；你说得对。这种迭代是不需要的。这已经是一个数组了它与Silvinus的答案有何不同？@fracz Your正确，但当我键入我的答案时，没有人回答这个问题。它与Silvinus的答案有何不同？@fracz Your正确，但是当我输入答案时，没有人回答这个问题。我们只是在同一时间写答案。我们只是在同一时间写答案。