javascript - ng-repeat 渲染空的 li 元素

Question

我正在使用 ng-repeat 循环遍历烂番茄 API 并显示电影标题。这是我的代码

JS:

var app = angular.module('app', []);

app.controller('ApiCtrl', function($http){
var app = this;
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json"
var key = "?apikey=myKey"

$http.get(url+key)

.success(function(data) {
  app.movies = data;
  console.log(data);
 })   
})

HTML:

<li ng-repeat="movie in app.movies">
    {{movie.title}}
</li>

</body>

这会在屏幕上输出 3 个空白 li 元素，如果我只调用 {{movie}}，那么整个对象都会被输出，这样我就知道绑定(bind)是正确的。

JSON 示例:

"movies": [
{
  "id": "771315918",
  "title": "Divergent",
}]

Answer 1

你的$scope在哪里？

尝试如下:

var app = angular.module('app', []);

app.controller('ApiCtrl', function($scope, $http){
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json"
var key = "?apikey=myKey"

$scope.movies = $http.get(url+key);

我不确定上面的代码是否适用于$http。我的建议是，在尝试从服务器获取数据之前，让所有 Angular 东西正常工作。例如，像这样定义 $scope.movi​​es:

$scope .movies =  [
    {
      "id": "771315918",
      "title": "Divergent",
    }
];

首先让其正常工作。