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}}，则输出整个对象，因此我知道绑定是正确的。

JSON的一个例子：

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

Answer 1

烂番茄API有它自己的电影键，所以我认为你需要这样做：

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

Answer 2

您的$ 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。我的建议是，在尝试从服务器获取数据之前，让所有有角度的东西都能正常工作。例如，定义$ scope.movies，如下所示：

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

首先让它发挥作用。

Answer 3

$ scope和'this'不一定是指同一件事。我会做的

$scope.app = null;

//When the deferred object is returned
.success(function (data) {
    $scope.app = data;
});

通过使用'this'，您指的是控制器，但视图无法访问。这是另一篇非常有用的帖子：

'this' vs $scope in AngularJS controllers

ng-repeat渲染空li元素

3 个答案: