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中的每个元素/图像吗？

检查控制台：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

你必须得到var items = classInstance.GetEmployee(emp => new EmpDTO { Address = emp.Address }); //items also will contain fields: Id, Name and Salary by default

data.data

并在ng-repeat中使用$http.get('https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json') .then(function (data) { $scope.imageUrls = data.data; });，因为您有重复的

track by $index

Answer 4

首先在$ http方法中，响应值是一个包含“data”元素的对象，它是您需要的数据，因此请使用： $scope.imageUrls = data.data;
然后你有重复的图像网址，在这种情况下，ng-repeat会返回一个错误，所以请改用它：
<div class="post" ng-repeat="imageUrl in imageUrls track by $index">

ng-repeat不迭代JSON中的图像列表

4 个答案: