Angular.jsとBootstrapの基本概念を最初に簡単に紹介します。
AngularJSはJavaScriptフレームワークです。 <script>タグを介してHTMLページに追加できます。
AngularJSは、ディレクティブを介してHTMLを拡張し、表現を介してデータをHTMLにバインドします。
TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
私は最近Angular.jsを学んでおり、学習プロセス中に多くのデモを実践しています。ここでは、最初にフォーム +ページネーションを投稿します。
最終結果を見てみましょう。
Angular.jsコードスタイルは非常に人気があり、数十行のコードが明確かつ簡潔に上記の機能を実装していると言わざるを得ません。
まず、テーブルのデータソースはserver.jsから来て、クリックしてダウンロードします。番号を取得してから、ページに表示します。
1.テーブルはng-repeatを通じて表示され、コードは次のとおりです。
<表> <tr> <th> index </th> <th ng-repeat = "（x、y）inアイテム[0]"> {{x}}} </th> </tr> <tr ng-repeat = "x inアイテム"> <td> {{$ index + 1}}}}}} </td> ng-bind = "x.city"> </td> <td ng-bind = "x.country"> </td> </tr> </table>$インデックスは、繰り返しのデフォルトパラメーターです。テーブルの列ヘッダーは、データソース（JSON）の最初の行にループされたキー値です。もちろん、Bootstrapがテーブルのクラスがテーブルボーダーであることを指定する必要がある場合。
2。パジネーションはNG-Reepeatも使用します。 Ng-Reepeatは一般的な指示であると言わざるを得ません。
ページングコードは次のとおりです。
<nav> <ul> <li> <a ng-click = "fortion（）"> <span>前のページ</span> </a> </li> <li ng-repeat = "pageList" ng-class = "{active：isactivepage（page）}"> <a ng-click = "selectpage（page）"> </</</</</< ng-click = "next（）"> <span>次のページ</span> </a> </li> </ul> </nav>ここでは、NGクリックイベント命令を使用します。また、NGクラスコマンドを使用しました
ng-class = "{active：isactivepage（page）}"上記のコードは、ページネーション用に選択されたスタイルです。
このテーブルは、ページにページを追加して偽のページングであり、バックエンドからのデータを1回取得し、異なるページングを介してJSONのフィルタリングされたデータを表示します。
特定のコード +コメント：
<！Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titlap> </title < file-> <link rel = "styleSheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/boottrap.min.css"> <style> #divmain {width：500px; margin：0 autop; wose; widtop; 50px;}。ページネーション{右：0px;位置：絶対; top：-30px;} nav li {cursor：pointer;} </style> <div id = "divmain" ng-app = "myapp" ng-controller = "myctrl" items [0] "> {{x}}} </th> </tr> <tr ng-repeat =" in items "> <td> {{$ index + 1}} </td> <td ng-bind =" x.name "> </td> <td ng-bind =" x.city ng-bind = "x.country"> </td> </tr> </table> <nav> <ul> <li> <li> <a ng-click = "forter（）"> <span>前のページ</span> </a> </li> <li ng-repeat = "pageList" ng-class = "{perage：<page（<page）"> <a perisepage = ""> page（<page） > {{page}} </a> </li> <li> <a ng-click = "next（）"> <span>次のページ</span> </a> </li> </ul> </nav> </div> <スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"> </script> <scrip> var app = angular.module（ "myapp"、[]）; app.controller（ "myctrl"、$ scope、$ scope、$ scope、$ scope、$ scope、$ scope、$ scope、 {$ http.get（ "service.js"）。then（function（response）{// data source $ scope.data = response.data.records; //ページ$ scope.pagesize = 5; $ scope.pages = math.ceil（$ scope.data.lengta.lengt.pages.pages.pages.newp.page./$ scope./$ scope.page.page.page.page.page.pages.page.pages = scope.pages> $ scope.pages> ？5：$ scope.pages; $ scope.pageList = []; $ scope.selpage = 1; $ SCOPE.PAGESIZE）） 1）;} //現在選択されているページインデックス$ scope.selectpage（page）{//最大1以上の場合（ページ<1 ||ページ> $ scope.pages）return; （（ページ + 2）> $ scope.pages？$ scope.pages：（page + 2））; page）;}; //現在選択されているページスタイル$ scope.isactivePage = function（page）{return $ scope.selpage == page;}; //前のページ$ scope.previous = function（）{$ scope.selpage（$ scope.selpage -1）;} 1）;};}）;}）</script> </body> </html>編集者は、Angular.jsとBootstrapの組み合わせについてテーブルページングコードを実装することについて多くのことを紹介します。