AngularJS의 페이지 매김 초점은 필터 사용에 반영됩니다. 이 필터도 복잡하지 않습니다.
먼저 HTML 코드를 넣으십시오.
<! docType html> <html ng-app = "demoapp"> <head> <meta charset = "utf-"> <meta name = "viewport"content = "width = device-width"> <title> demo </title> <link rel = "stylesheet"href = "demo.css"> <div> <div ng-controller = "democtrl"> <div> ul> <li ng-repeat = "demolists []. name | paging : paging : currentpage*listsperpage | limitto : listsperpage"> {{sentences}} </le-repeat dynated data-> </ul> </ul> </ul> ng-click = "prevpage ()"> 이전 페이지 </a> <a ng class = "{true : 'currentStep', false : 'step'} [num == currentPage]"ng-repeat] "ng-repeat ="num in pagenum "ng-click ="setPage (num) "> {num+}} </a> <! ng-click = "nextpage ()"> 다음 페이지 </a> </a> </div> </div> <script src = "angular.min.js"> </script> <!-angularjs 파일을 소개합니다-> <script src = "demo.js"> </script> </html>NG 클래스가 여기에 사용됩니다. 현재 페이지 CurrentPage가 페이지 번호 NUM과 같으면 CurrentStep 스타일이 표시되고 동일하지 않으면 스텝 스타일이 표시됩니다.
키 코드는 13 줄입니다. NG-Repeat가 데이터를 시뮬레이션하면 필터를 페이징 및 각도 필터 한계라고합니다.
그런 다음 CSS 코드가 있습니다. 주로 스타일을 조정할 말이 없습니다. NG 클래스에 두 가지 스타일을 추가해야합니다.
ul> li {list-style : none; width : px; 높이 : px; 테두리 : px solid #caf; margin-bottom : px; px;}. NextLink, .prevlink {font-size : px; line-height : px; 높이 : px; px : solid px #aa; color : #; px; px; : px; : px; : px; #fff; float : 왼쪽; 커서 : 포인터;} A.prevlink : 호버, A.NextLink : 호버 {배경 : #AAA! 중요; 색상 : #ffff! 중요; 커서 : 포인터;}. 단계 {표시 : block; line-height : px : px; 테두리 : 단단한 px #; px; float : 왼쪽; 마진 : px; 목록 스타일 : 없음; 커서 : 포인터;}.}. currentStep {border-color : #ffff; padding : px; color : #f; font-weight : bold; float; display : block; line-height : px; 높이 : px; 패드; px; px; 포인터;}마지막으로 JS입니다
var demoapp = angular.module ( 'demoapp', []); demoapp.filter ( 'paging', function () {// paging filter return function (lists, start) {// 두 매개 변수 목록은 html : // start에서 ng-repeat의 원시 데이터입니다. lists.slice (start); // 시작};}); demoapp.controller ( '$ scope', function ($ scope) {// page controller $ scope.demolists = [// 이름 : 'hello world', '내가 hello', ',', ',', ',', '' 개발자. ','이 글을 읽어 주셔서 감사합니다 ','감사합니다. $ scope.demolist []. name.length; i =; i <$ scope.pages; i ++) {$ scope.pagenum.push (i);} $ scope.currentpage =; pages} $ scope.prevpage = function () {// 이전 페이지에서 실행 된 함수를 클릭하면 ($ scope.currentPage>) {$ scope.currentPage-;}} $ scope.nextpage = function () {// 다음 페이지에서 실행 된 함수를 클릭하십시오. $ scope.pages-) {$ scope.currentPage ++;}}]);생성하는 pagenum은 0에서 시작하지만 실제 페이지 번호는 처음부터 시작되므로 HTML의 18 라인이 Num +1 인 이유입니다.
위의 내용은 AngularJS가 편집자가 소개하지 않고 페이징 기능을 구현하는 코드입니다. 나는 그것이 당신을 도울 수 있기를 바랍니다. AngularJS에 대해 더 알고 싶다면 Wulin.com 웹 사이트에주의를 기울이십시오!