javascript - 使用Angular调用themoviedb json的分页事件问题

Question

我正在使用 themoviedb API 获得 ajax 响应。我想调用我的函数，每次调用该函数时，该函数都会使用不同的页码获取 API 响应。

我已经设法获取数据，并且可以在成功函数中记录正确的 url。但是，调用的 json 不会使用新的页码更新，它始终是页面加载时调用的第一个。我是否缺少一些使用更新后的 url 正确重新初始化 ajax 调用的功能？

这是控制器：

angular.module('MovieApp', [])
    .controller("MovieAppCtrl",
        [
            '$http', '$scope',
            function($http, $scope) {
                $scope.MovieData = [];
                $scope.Search = null;
                $scope.Key = '01b2f34add226a588438bf6e49b953d5';
                $scope.GetMoviesData = function(number) {
                    try {
                        $http({
                            url: 'https://api.themoviedb.org/3/movie/popular?api_key='+$scope.Key+'&page="'+number+'"',
                            method: "GET",
                        }).then(
                            function(payload) {
                                $scope.MovieData = payload.data;
                                console.log($scope.MovieData);
                                console.log('https://api.themoviedb.org/3/movie/popular?api_key='+$scope.Key+'&page='+number+'');
                            },
                            function(){
                                alert("Something is wrong. Please try again.");
                            });
                    } catch (error) {
                        alert("Exception occured while fetching movie data.");
                    }
                }
            }
        ]);
    angular.element(function() {
        angular.bootstrap(document, ['MovieApp']);
    });

这里，数字代表添加到 url 路径的页码：像这样： https ://api.themoviedb.org/3/movie/popular?api_key=01b2f34add226a588438bf6e49b953d5&page=2

标记：

<div ng-controller='MovieAppCtrl'>

<div class="album">
            <div class="container">
                <div class="clearfix row">
                  <a ng-repeat="movie in MovieData.results | limitTo:100" class="video-list col-md-4" target="_blank" ng-href="">
                    <div class="card mb-4 box-shadow">
                        <img ng-src="https://image.tmdb.org/t/p/w185_and_h278_bestv2/{{movie.poster_path}}" title="{{movie.title}}" alt="{{movie.title}}" class="card-img-top">
                        <div class="card-body">
                          <h5 class="">{{movie.title}}</h5>
                          <span>Rating: {{movie.vote_average}}</span><br>
                          <span>Votes: {{movie.vote_count}}</span>
                        </div>
                    </div>
                  </a>
                </div>
                <div class="pagination check-element m-show-hide ng-hide" ng-show="checked">
                    <p class="left">You're on page: 1 of 5 <span class="total_results">(100 resultat)</span></p>
                    <p class="right pagination">
                        <span ng-click="GetMoviesData(1)">
                            <span class="page1">1</span>
                        </span>
                        <span ng-click="GetMoviesData(2)">
                            <span class="page2">2</span>
                        </span>
                        <span ng-click="GetMoviesData(3)">
                            <span class="page3">3</span>
                        </span>
                        <span ng-click="GetMoviesData(4)">
                            <span class="page4">4</span>
                        </span>
                        <span ng-click="GetMoviesData(5)">
                            <span class="page5">5</span>
                        </span>
                    </p>
                </div>
              </div>
        </div> <!-- album END  -->


</div>

这里 GetMoviesData(1) 将页码发送给函数以调用 API 路径的正确页面。

我错过了什么？

标签： javascriptangularjsthemoviedb-api