2016-12-18 11 views
1

私はプロジェクトに取り組んでいます。初心者はhtml、css、javascript、およびangularです。イム映画をサイトからAPIを使用して、そのデータがJSONであるとページ

{ 
"page": 1, 
"results": [ 
{ 
"poster_path": "/1yeVJox3rjo2jBKrrihIMj7uoS9.jpg", 
"popularity": 14.31312, 
"id": 1396, 
"backdrop_path": "/eSzpy96DwBujGFj0xMbXBcGcfxX.jpg", 
"vote_average": 8, 
"overview": "Breaking Bad is an American crime drama television series created and produced by Vince Gilligan. Set and produced in Albuquerque, New Mexico, Breaking Bad is the story of Walter White, a struggling high school chemistry teacher who is diagnosed with inoperable lung cancer at the beginning of the series. He turns to a life of crime, producing and selling methamphetamine, in order to secure his family's financial future before he dies, teaming with his former student, Jesse Pinkman. Heavily serialized, the series is known for positioning its characters in seemingly inextricable corners and has been labeled a contemporary western by its creator.", 
"first_air_date": "2008-01-19", 
"origin_country": [ 
"US" 
], 
"genre_ids": [ 
18 
], 
"original_language": "en", 
"vote_count": 858, 
"name": "Breaking Bad", 
"original_name": "Breaking Bad" 
}, 

によって並べ替え私は、画面上でテレビ番組を一覧表示するために管理しているが、私はので、可変ページの問題を抱えています。私は$ http.getを使用するときに私はこのURLを使用しますhttps://api.themoviedb.org/3/tv/top_rated?api_key=ap_key&language=en-US&page=1、どのように私はページと自動リフレッシュページを変更するので、ボタンをクリックして2ページ目を表示します。

 Mpage=1; 
     TVpage=1; 

     nextM = function(){Mpage++;} 

     $http.get('https://api.themoviedb.org/3/movie/popular?api_key=040eb2b1bb7d1697319a08872e2578cb&page='+Mpage) 
     .success(function(data) { 
     $scope.Mresults = data.results; 
     }) 


     $http.get('https://api.themoviedb.org/3/tv/popular?api_key=040eb2b1bb7d1697319a08872e2578cb&page='+TVpage) 
     .success(function(data) { 
     $scope.TVresults = data.results; 
     }) 
+0

まず第一には、jQueryと角度を混在させないでください。あなたが使うことができる既に利用可能な多数のページ設定モジュールがあります – charlietfl

答えて

0

添付のスニペットを確認してください。それはあなたがこれを達成する方法についてのアイデアを与えるはずです。

PS:角度指示を実行していないため、スニペットは実行されません。しかし、簡単なjqueryスニペットを使って、どのようにして動作させるか考えてください。あなたは本当にあなたが何をしているか知っていると角のモジュールで利用できない機能のためのjQueryのプラグインを使用する必要がありますしない限り、

$(function(){ 
 
    _pagination.initialize(); 
 
}); 
 

 
var _pagination = { 
 
    initialize: function(){ 
 
    $('.pagination').on('click', function(){ 
 
     var page = $(this).attr('id').split('_')[2]; 
 
     _pagination.getPageData(page); 
 
    }); 
 
    }, 
 
    getPageData: function(page){ 
 
    $http.get('https://api.themoviedb.org/3/movie/popular?api_key=040eb2b1bb7d1697319a08872e2578cb&page='+page) 
 
     .success(function(data) { 
 
     $scope.Mresults = data.results; 
 
     }) 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button type="button" id="pagination_btn_1" class="pagination">1</button> 
 
<button type="button" id="pagination_btn_2" class="pagination">2</button> 
 
<button type="button" id="pagination_btn_3" class="pagination">3</button> 
 
<button type="button" id="pagination_btn_4" class="pagination">4</button> 
 
<button type="button" id="pagination_btn_5" class="pagination">5</button>