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变量。

变化：

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

要：

$scope.movieList = data;

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

ng-repeat未列出电影标题

1 个答案: