javascript - ng-repeat 不列出电影片名

Question

我正在尝试在 Angular 中创建一个简单的电影应用程序。我可以向 tmdb(电影数据库)api 发出 JSON 请求，并在我的主页上显示原始结果。但我的问题是我似乎无法只显示 JSON 请求中的电影标题。

examplecontroller.js.coffee

angular.module('app.exampleApp').controller('exampleCtrl', [

  '$scope', '$http', function($scope, $http) {
    var base = 'http://api.themoviedb.org/3';
    var service = '/movie/popular';
    var apiKey = 'a8f703963***065942cd8a28d7cadad4';
    var callback = 'JSON_CALLBACK'; // provided by angular.js
    var url = base + service + '?api_key=' + apiKey + '&callback=' + callback;

    $scope.movieList = 'requesting...';

    $http.jsonp(url).then(function(data, status) {
      $scope.movieList = JSON.stringify(data);
      console.log($scope.movieList)
    },function(data, status) {
      $scope.movieList = JSON.stringify(data);
    });
  }
]);

显示.html.haml

#search{"ng-app" => "app.exampleApp"}
  %div{"ng-controller" => "exampleCtrl"}
    %div{"ng-repeat" => "movie in movieList track by $index"}
      {{movie.title}}

当我检查 Chrome 中的元素时，我发现我有大约 25.000 个 ng-repeat div。但都没有内容。

我一直在关注 this一些教程(和其他一些资源)和我不明白的东西是 Movielist 中的电影。我知道 movielist 是整个 json 请求，但什么是电影？

已解决

Controller

angular.module('app.exampleApp').controller('exampleCtrl', [

  '$scope', '$http', function($scope, $http) {
    var base = 'http://api.themoviedb.org/3';
    var service = '/movie/popular';
    var apiKey = 'a8f7039633f2065942cd8a28d7cadad4';
    var callback = 'JSON_CALLBACK'; // provided by angular.js
    var url = base + service + '?api_key=' + apiKey + '&callback=' + callback;

    $scope.movieList = [];

    $http.jsonp(url).
      success(function (data, status, headers, config) {

        if (status == 200) {
          $scope.movieList = data.results;
          console.log($scope.movieList)
        } else {
          console.error('Error happened while getting the movie list.')
        }

      }).
      error(function (data, status, headers, config) {
        console.error('Error happened while getting the movie list.')
      });
    }
]);

显示

%h1
  Logo
%li
  = link_to('Logout', destroy_user_session_path, :method => :delete)

#search{"ng-app" => "app.exampleApp"}
  %div{"ng-controller" => "exampleCtrl"}
    %div{"ng-repeat" => "movie in movieList"}
      {{ movie.original_title }}

Answer 1

您的问题是您将返回到请求回调的 javascript 数组作为 data并使用 JSON.stringify() 将其转换为字符串.

然后当你把这个字符串传递给ng-repeat它遍历该字符串中的每个字符。因此，您有大量重复的 <div>但是因为每个都是一个包含一个字符的字符串，所以没有 title要打印的字符串的属性

在请求回调中将数组直接传递给范围变量。

改变:

$scope.movieList = JSON.stringify(data);

收件人:

$scope.movieList = data;

JSON 是一种字符串数据格式。当$http收到该字符串响应后，它将在内部将其解析为 javascript 对象/数组。你应该不需要自己改造它