序文
言語を学ぶ前に、それを学ぶためにあなたを駆り立てるビジネスのニーズがなければなりません。もちろん、NGも例外ではありません。 NGを学ぶ前に、私がやりたかった最初のデモは、NGに基づいてページングを実装することでした。基本的なコンピューティングのアイデアに加えて、手順を使用してプラグインにカプセル化し、ページングが必要なリストページに直接参照することです。
プラグイン
ページングプラグインをカプセル化するとき、一般的にいくつかの方法を実装しました。ついに友人がカプセル化したプラグインを見つけました(http://www.miaoyueyue.com/archives/813.html)。私はそれがかなり良いと感じたので、私は彼のソースコードを読んで、プロジェクトで直接それを使用しました。
使用の原則と指示
1.プラグインソースコードは、主にAngularディレクティブに基づいて実装されています。
2。呼び出しの際の重要なポイントは、バックグラウンドリクエスト処理機能、つまりバックグラウンドからデータを取得することです。
3.プラグインには、CurrentPage、ItemsPerpage、Current Page番号、およびページごとのレコード番号の2つの重要なパラメーターがあります。
4.メソッド呼び出しを実装した後、ページプラグインのページ番号の各クリックに基づいて、対応するページ番号データを取得するには、背景を再送信する必要があります。通話のページ番号で、$ watchを使用して監視しました。私が最初にそれを使用したとき、私はプラグインのオンチェンジに呼び出し関数を配置しましたが、背景は毎回2回トリガーされることがわかりました。この場所は注意が必要です。
5.リクエストの背景をサービスレイヤーにカプセル化し、コントローラーで呼び出します。これはMVCのアイデアにも沿っています。
複製図
コードを呼び出します
<div ng-app = "demoapp" ng-controller = "democontroller"> <table> <thead> <tr> <td> id </td> <td> firstName </td> <td> lastName </td> <td> std> status </td> <td>アドレス</td> </tr </tr <ttr Perss "> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {{emp.lastname}} </td > <td> {{emp.status}} </td> <td> {{emp.address}} </td> </tbody> </table> <tm-pagination conf = "paginationconf"> </tm-pagination> </div> <script type = "text/javascript"> var app = angular.module( 'demoapp'、['tm.pagination']); app.controller( 'democontroller'、['$ scope'、 'busenervice'、unterserservice、buresserservice(bireserservice、 'buresservice、' buresserservice) postdata = {pageindex:$ scope.paginationconf.currentpage、pagesize:$ scope.paginationconf.itemsperpage} businessservice.list(function(response){$ scope.paginationconf.totalitems = response.cope.persons = count; Response.Items;});} //ページング$ scope.paginationconf = {currentPage:1、itemsperpage:5} CurrentPageとItemperpageが個別に監視されている場合、バックグラウンドクエリの変更、2つのバックグラウンドイベントがトリガーされますApp.Factory( 'BusinessService'、['$ http'、function($ http){var list = function(postdata){return $ http.post( '/employee/getallemployeee'、postdata);} return {list:function(postdata){return list(postdata);上記のコンテンツは、編集者がAngularJSに基づいてページング機能を実装するために紹介するコードの例です。私はそれが誰にでも役立つことを願っています!