AngularJSのページネーションの焦点は、フィルターの使用に反映されています。このフィルターも複雑ではありません。
まず、HTMLコードを入れます。
<！doctype html> <html ng-app = "demoapp"> <head> <meta charset = "utf-"> <meta name = "viewport" content = "width = device-width"> <title> </title> <link rel = "styleSheet" href = "demo.css ng-controller = "democtrl"> <div> <ul> <li ng-repeat = "Demolistsの文章[]。名前|ページング：currentPage*listsperpage | limitto：listssperpage"> {{文章}}} </li> <！ - ng-repeat generate simulated divimative ng-click = "prevpage（）">前のページ</a> <a ng-class = "{true： 'currentstep'、false： 'step'} [num = currentPage]" ng-repeat = "num in pagenum" ng-click = "setpage（num）"> {{num+}}} <！ - ng-repeat ng-repeat ng-repeat ng-click = "nextpage（）">次のページ</a> </div> </div> <scrip src = "angular.min.js"> </scrip> <！ - angularjsファイルを紹介 - > <スクリプトsrc = "demo.js"> </script> </body> </html> </html> </html> <ここではNGクラスが使用されています。現在のページCurrentPageがページ番号numに等しい場合、現在のステップスタイルが表示され、等しくない場合、ステップスタイルが表示されます。
キーコードは13行です。 Ng-Reepeatがデータをシミュレートすると、フィルターはページングと角度フィルターリミットと呼ばれます。
次に、CSSコードがありますが、主にスタイルを調整するために何も言うことはありません。 NGクラスに2つのスタイルを追加することを忘れないでください。
ul> li {list-style：none; width：px; height：px; border：px solid＃caf; margin-bottom：px; padding-left：px;}。なし;＃fff; float：left; cursor：pointer;} a.prevlink：hover、a.nextlink：hover {background：＃aaa！fality; color：#ffff！fality; cursor：pointer;}。 px; font-size：px; float：left; margin：px; list-style：none; cursor：pointer;}。 px;リストスタイル：なし;カーソル：ポインター;}最後に、それはJSです
var demoapp = angular.module（ 'demoapp'、[]）; demoapp.filter（ 'paging'、function（）{//ページングフィルターリターン関数（リスト、start）{// 2つのパラメーターリストは、html：// startのng-repeatの生データです。 lists.slice（start）; // start}開発者。」、「これを読んでくれてありがとう」、「なぜ私はあなたに感謝します」、「あなたのAngularjsの勉強とは何の関係もないからです」、「これらは単なるデモ文です」、「特別な意味はありません。」、そしてあなたはまだ列によってこの列を読むのに時間をかけます」、「大丈夫ですか？」 $ scope.demolists []。length i =; i <$ scope.pages; i ++）{$ scope.pagenum.push（i）;} currentpage =; pages} $ scope.prevpage = function（）{//前のページで実行された関数をクリックします（$ scope.currentpage>）{$ scope.currentpage - ;}} $ scope.nextpage = function（）{//次のページで実行された機能をクリックします。 $ scope.pages-）{$ scope.currentpage ++;}}}}]）;生成するページネムは0から始まりますが、実際のページ番号は最初から始まるので、HTMLの18行が+1である理由です。
上記のコンテンツは、AngularJSが編集者によって導入されたEllipsisなしでページング機能を実装するコードです。私はそれがあなたを助けることができることを願っています。 Angularjsについてもっと知りたい場合は、wulin.comのWebサイトに注意してください！