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サイトに注意してください!