항목 목록을 표시하는 것은 대부분의 웹 애플리케이션에서 일반적인 작업입니다. 일반적으로 우리의 데이터는 비교적 커서 단일 페이지에서는 잘 표시 될 수 없습니다. 이 경우 이전 페이지와 다음 페이지로 이동하는 기능으로 데이터를 페이지 양식으로 표시해야합니다. 이제 저는 Angular, AngularJS Pagination을 사용하고 지침 구현을 기반으로, 스타일로 Bootstrap을 사용하고 HTML 코드에 직접 태그를 추가하여 호출하고 있습니다.
먼저 렌더링을 살펴 보겠습니다
예제 코드
app.directive ( 'pagepagination', function () {return {retrict : 'e', 템플릿 : '<div> ul> <li ng class = "page.style"ng-repeat = "pagelist in pagelist"> <a href = "{{page.link}}"> {{page.name}} ng-if = "pagelist [0]"> <li> <span> Total <b> {{peagerecord}} </b> records/total <b> {{pagecount}} </b> pages </b> pages </b> </li> </ul> </div> ', true, scope : {pageid ":" "," "", "" "," "", "" "," "="}, 컨트롤러 : [ '$ scope', function ($ scope) {pageId) {return $ scope.pageurltemplate.replace ( "{page}", page}; 1) / $ scope._pagesize + 1; {name : 'home', style.pageid = "disabled": "", 링크 : $ scope.getLink (1)}; $ scope.getLink (1)}); page.push ({name : 'next page', style : $ scope.pageid == $ scope.pageCount? "disabled": ", 링크 : $ scope.getLink ($ scope.pageCount) {{name : 'style : $ scope.pageId.pagecount?" $ scope.getLink ($ scope.pagecount);}; !! $ SCOPE.PAGEID = 1; $ scope.pageInit ();통화 코드 :
<page-pagination page-id = "pageid"page-record = "recordCount"page-url-template = "urltemplate"> </page-pagination>
위는 Angular.js Paglination 코드의 전체 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.