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

show.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 教程（以及其他一些来源），但我不明白的是 movie in Movielist。我知道 movielist 是整个 json 请求，但什么是电影？

已解决

控制器

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 object/array。应该不需要自己改造

ng-repeat 未列出电影名称

ng-repeat not listing movie titles

javascript

json

angularjs

ng-repeat

angularjs-ng-repeat