AngularJSは、ページング機能とサンプルコードを実装します

Angularjsに基づいたページネーションの実装

序文

言語を学ぶ前に、それを学ぶためにあなたを駆り立てるビジネスのニーズがなければなりません。もちろん、NGも例外ではありません。 NGを学ぶ前に、私がやりたかった最初のデモは、NGに基づいてページングを実装することでした。基本的なコンピューティングのアイデアに加えて、手順を使用してプラグインにカプセル化し、ページングが必要なリストページに直接参照することです。

プラグイン

ページングプラグインをカプセル化するとき、一般的にいくつかの方法を実装しました。ついに友人がカプセル化したプラグインを見つけました（http://www.miaoyueyue.com/archives/813.html）。私はそれがかなり良いと感じたので、私は彼のソースコードを読んで、プロジェクトで直接それを使用しました。

使用の原則と指示

1.プラグインソースコードは、主にAngularディレクティブに基づいて実装されています。

2。呼び出しの際の重要なポイントは、バックグラウンドリクエスト処理機能、つまりバックグラウンドからデータを取得することです。

3.プラグインには、CurrentPage、ItemsPerpage、現在のページ番号、およびページごとのレコード数の2つの重要なパラメーターがあります。

4.メソッド呼び出しを実装した後、ページプラグインのページ番号の各クリックに基づいて、対応するページ番号データを取得するには、背景を再送信する必要があります。通話のページ番号で、$ watchを使用して監視しました。私が最初にそれを使用したとき、私はプラグインのオンチェンジに呼び出し関数を配置しましたが、背景は毎回2回トリガーされることがわかりました。この場所は注意が必要です。

5.リクエストの背景をサービスレイヤーにカプセル化し、コントローラーで呼び出します。これはMVCのアイデアにも沿っています。

複製図

コードを呼び出します

<div ng-app = "demoapp" ng-controller = "democontroller"> <table> <thead> <tr> <td> <td> id </td> <td> firstName </td> <td> lastName </td> <td> status </td> <td> ng-repeat = "persons"> <td> {{emp.id}} </td> <td> {{emp.firstname}}} </td> <td> {{emp.lastname}} </td> <td> {{extatus} </td> <td> {{emp.address}} </td> </tr> </tbody> </table> <tm-pagination conf = "paginationconf"> </tm-pagination> </div> <script = "text/javascript"> var app = angular.module（ 'demoapp'、['tm.pagination']; App.Controller（ 'Democontroller'、['$ Scope'、 'BusinessService'、function（$ scope、businessService）{var getAllemployee = function（）{var postdata = {pageindex：$ scope.paginationconf.currentPage、Paysize：$ scope.paginationconf.itemsperpage} businessService.list（postdata）.success（function（response）{$ scope.paginationconf.totalitems = response.count; $ scope.persons = response.items;}）; /************************************************************************ページ番号とページレコードが変更され、currentpageとitemperpageが個別に監視されている場合、2つの背景イベントがトリガーされます。 $ scope。$ watch（ 'paginationconf.currentpage + paginationconf.itemsperpage'、getallemployee）; //ビジネスクラスApp.Factory（ 'BusinessService'、['$ http'、function（$ http）{var list（postdata）{return $ http.post（ '/employee/getallemployee'、postdata）;} return {list：function（postdata）{return list（postdata）;

プラグインとデモのダウンロード

http://yunpan.cn/cqehnlrpnkniqアクセスパスワードbe74

上記は、AngularJSがページネーション関数を実装する情報です。今後も関連情報を追加し続けます。このウェブサイトへのご支援ありがとうございます！