2016-08-24 4 views
0

私はページ区切りが新しく、私が読んだものからAngular JSのために非常に求められているという指示が見つかりました。私は私が作成した自分のページ区切りhtml/CSSレイアウトで動作するページネーションを実装しようとしています。Angular JS:Pagination.tpl.htmlテンプレートを使用せずにページ区切りディレクティブJSを使用するページ分割

ページ番号は正しく表示され、表示されている項目の数が指定したとおりに正しく表示されます。しかし、ページネーションリストのページ2をクリックすると問題が発生し、次の5つの項目がロードされません。それは単に同じリストにとどまります。

このディレクティブのすべての部分を正しく使用する方法が混乱していますので、このディレクティブを実装する際に間違っていると思います。

私が従うガイドは上記のリポジトリと同じhereです。

dirPagination.js 

次のように私のHTMLは次のとおりです:私のコントローラで

<div id="pages" ng-if="1 < pages.length || !autoHide"> 
    <span ng-class="{ active : pagination.current == pageNumber, 
     disabled : pageNumber == '...' }" class="pagenumber" 
     dir-paginate="pageID in controller.list| filter:q | itemsPerPage: 
     controller.pageCount" current-page="controller.currentPage"> 
    <a href="" ng-click="setCurrent(pageID)">{{ pageID.id }}</a> 
    </span> 
</div> 

<div class="myResults" dir-paginate="results 
    in controller.list| filter:q | itemsPerPage: 5" current-page="1"> 
    <div class="listFigures"> 
     <figure class="imageList"> 
      <img ng-src="{{results.image}}" ng-alt= 
       {{results.imageAlt}}" ng-title= 
       {{results.imageTitle}}" /> 
     </figure> 
    </div> 
</div> 

私はそれが使用されているどのように多くの項目(に基づいてPAGECOUNTセットを持つファイルをダウンロードし、プロジェクトに追加

パラメータとして、現在何ページを表示するか)

vm.pageCount=2; 
vm.currentPage = 1; 

ワーキング:

  • ページのリストは、あなたがそれが8ページであることがわかります上記のコード以下、表示されます。
  • のみ5項目

が機能していない示されているように表示されます(この場合は2で)別のページに

私の実装が完全にオフになっている場合、これをどうやって取得するのか非常に混乱しています。私はいくつかの記事を読んだだけでなく、リポジトリのガイドに従ってみることを試みましたが、正しく使用する方法を理解していません。どんな助けでも大歓迎です。あなたは、これらのそれぞれをどのように使用するかを示す良い例を付けることができるならば、への新規開発者にはhtml/cssというカスタムを実装し、dirPagination.tpl.html templateを使用しないでください。

ベストプラクティスに従うと、標準角度のhereを読むことができます。

答えて

関連する問題