アイテムのリストを表示することは、ほとんどのWebアプリケーションで一般的なタスクです。通常、私たちのデータは比較的大きくなり、単一のページでうまく表示できません。この場合、前のページと次のページに移動する機能を使用して、ページ形式にデータを表示する必要があります。現在、私はAngularを学習しており、Angularjs Paginationを使用して指令の実装に基づいて、Bootstrapをスタイルで使用し、HTMLコードに直接タグを追加して呼び出しています。
最初にレンダリングを見てみましょう
例コード
app.directive( 'pagepagination'、function(){return {restrict: 'e'、テンプレート: '<div> <ul> <li ng-class = "page.style" ng-repeat = "page in pagelist"> <a href = "{{page.link}}" ng-if = "pageList [0]"> <li> <span> total <b> {{pageRecord}} </b> </b> attotal <b> {{pagecount}} </b>ページ</span> </li> </ul> </div> '、置換:true、scope:{"" paged "" "" peaged: " "="、 "pageurltemplate": "="}、[$ scope '、function($ scope.getlink){return $ scope.pageurltemplate.replace( "{page}"、pageid); $ scope.pageid -1) / $ scope._ $ scope._pagesize + 1; :$ scope.getLink(1)}); } page.push({name: 'Next Page'、style:$ scope.pageid == $ scope.pagecount? "disabled"、link:$ scope.getlink($ scope.pagecount)})}); $ scope.getLink($ scope.pagecount); !! $ scope._pagesInt($ scope.pagesize); $ scope.pageid = 1; $ scope.pageinit();コールコード:
<Page-Pagination Page-Id = "PageId" Page-Record = "RecordCount" page-url-template = "urltemplate"> </page-pagination>
上記は、Angular.jsページネーションコードのコンテンツ全体です。私はそれがすべての人の学習に役立つことを願っています、そして、私は誰もがwulin.comをもっとサポートすることを願っています。