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 检查错误，但数据似乎在那里。它只是返回数据块而不是 JSON 中的每个 element/image 吗？

检查控制台：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 中你必须通过参数添加轨道因为图像可以重复

Answer 2

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

你想要 data.data 中的内容（你还应该定义 imageUrls 变量（$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>

Answer 3

更新了 plunkr http://plnkr.co/edit/agVrWD8I4581a0702ehy?p=preview

你必须得到data.data

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

        });

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

Answer 4

首先，在 $http 方法中，响应值是一个包含 "data" 元素的对象，该元素是您需要的数据，因此请使用：
$scope.imageUrls = data.data;
那么你有重复的图像 url ，在这种情况下 ng-repeat returns 一个错误所以使用这个代替：
<div class="post" ng-repeat="imageUrl in imageUrls track by $index">

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

ng-repeat not iterating through list of images in JSON

javascript

angularjs

ng-repeat

angularjs-ng-repeat