Question

<html ng-app="movieApp">
 <head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
 <script>
  var base = 'http://api.themoviedb.org/3';
  var service = '/movie/862';
  var apiKey = '####';
  var callback = 'JSON_CALLBACK';
  var url = base + service + '?api_key=' + apiKey + '&callback=' + callback;
  var movieApp = angular.module('movieApp', []);

  movieApp.controller('MovieCtrl', function ($scope, $http){
      $http.jsonp(url).then(function(data) {
      $scope.movies = data;
    });
  });
</script>
</head>
<body style="padding:12px;" ng-controller="MovieCtrl">
  <div ng-repeat="movie in movies">
    <h1>{{movie.title}} {{movie.id}}</h1>
    <p>{{movie.overview}}</p>
    <img ng-src="http://image.tmdb.org/t/p/w500{{movie.poster_path}}" style='width:200px'/>
  </div>
</body>
</html>

尝试使用Angular.js获取JSON。信息很好，但我相信也会遇到这种情况。导致5个图像被放置在屏幕上，4个被破坏，1个良好的图像与数据一起被放置。如何避免发送这些额外数据？

Answer 1

使用AJAX请求JSON数据

您希望通过AJAX请求获取JSON数据并进行渲染。使用$ http服务实现一个控制器来获取数据并将其存储在范围内。

<body ng-app="MyApp">
  <div ng-controller="PostsCtrl">
    <ul ng-repeat="post in posts">
      <li>{{post.title}}</li>
    </ul>
  </div>
</body>
var app = angular.module("MyApp", []);

app.controller("PostsCtrl", function($scope, $http) {
  $http.get('data/posts.json').
    success(function(data, status, headers, config) {
      $scope.posts = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

http://fdietz.github.io/recipes-with-angular-js/consuming-external-services/requesting-json-data-with-ajax.html

使用Angular.js获取JSONP

1 个答案: