AngularJS를 기반으로 한 페이지 매김 구현
머리말
어떤 언어를 배우기 전에, 언어를 배우려면 비즈니스가 필요합니다. 물론 NG도 예외는 아닙니다. NG를 배우기 전에 내가하고 싶은 첫 번째 데모는 NG를 기반으로 한 페이징을 구현하는 것이 었습니다. 기본 컴퓨팅 아이디어 외에도 지침을 사용하여 플러그인으로 캡슐화하고 페이징이 필요한 목록 페이지에서 직접 참조해야합니다.
플러그인
페이징 플러그인을 캡슐화 할 때 일반적으로 몇 가지 방법을 구현했으며 마침내 친구 (http://www.miaoyueyue.com/archives/813.html)가 캡슐화 한 플러그인을 발견했습니다. 나는 그것이 꽤 좋다고 느꼈기 때문에 그의 소스 코드를 읽고 프로젝트에서 직접 사용했습니다.
사용을위한 원칙 및 지침
1. 플러그인 소스 코드는 주로 각도 지침을 기반으로 구현됩니다.
2. 호출 시점은 배경 요청 처리 기능, 즉 배경에서 데이터를 검색하는 것입니다.
3. 플러그인에는 CurrentPage, ItemSperPage, 현재 페이지 번호 및 페이지 당 레코드 수의 두 가지 주요 매개 변수가 있습니다.
4. 메소드 호출을 구현 한 후에는 페이징 플러그인의 페이지 번호를 클릭하여 해당 페이지 번호 데이터를 얻으려면 배경을 다시 제출해야합니다. 통화의 페이지 번호에서 $ watch를 사용하여 모니터링했습니다. 처음 사용했을 때, 호출 기능을 플러그인의 OnChange에 넣었지만 배경이 매번 두 번 트리거 될 것임을 알았습니다. 이곳은주의가 필요합니다.
5. 요청 배경을 서비스 계층에 캡슐화 한 다음 컨트롤러에서 호출하는데, 이는 MVC 아이디어와도 일치합니다.
복제 다이어그램
통화 코드
<div ng-app = "demoapp"ng-controller = "democontroller"> <table> <thead> <td> <td> id> id </td> <td> FirstName </td> <td> lastName </td> <td> <td> address </td> </tb> <tbod> <ttr> ng-repeat = "emps in persons"> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {{emp.lastname}} </td> <td> {{emp.status}} </td> <td> {{emp.address}} </td> </tr> </tbody> </table> <tm-pagination conf = "pagitinationconf"> </tm-pagination> </div> <script type = "text/javaScript"> var app = angular.module ( 'demoapp', [ 'tm.pagination'); app.controller ( 'democontroller', [ '$ scope', 'businessService', function ($ scope, businessService) {var getAleLemployee = function () {var postData = {pageIndex : $ scope.paginationconf.currentPage, pagesize : $ scope.paginationconf.itperpage} businesservice.list (postdata) .success (function (response) {$ scope.paginationconf.totalitems.count; $ scope.persons = response.Items;}) // paging $ scope.paginateconf = {curtentPage : 1, 5}; /****************************************************************************************** When page numbers and page records change, monitoring background query If currentPage and itemsPerPage are monitored separately, two background events will be triggered. ***************************************************************/ $ scope. $ watch ( 'paginationconf.currentpage + paginationconf.itemsperpage', getallemployee); // 비즈니스 클래스 app.factory ( 'BusinessService', [ '$ http', function ($ http) {var list = function (postdata) {return $ http.post ( '/employee/getallemployee', postdata);} return {list : function (postData) {postData);});});플러그인 및 데모 다운로드
http://yunpan.cn/cqehnlrpnkniq 액세스 암호 Be74
위는 AngularJS가 Pagination 기능을 구현하는 정보입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 웹 사이트를 지원 해주셔서 감사합니다!