먼저 Angular.js 및 Bootstrap의 기본 개념을 간단히 소개하겠습니다.
AngularJS는 JavaScript 프레임 워크입니다. <cript> 태그를 통해 HTML 페이지에 추가 할 수 있습니다.
AngularJS는 지침을 통해 HTML을 확장하고 표현식을 통해 데이터를 HTML에 바인딩합니다.
트위터의 부트 스트랩은 현재 가장 인기있는 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다. 단순하고 유연하여 웹 개발을 더 빨리 만듭니다.
나는 최근 Angular.js를 배우고 있으며 학습 과정에서 많은 데모를 연습했습니다. 여기에 양식 + 페이지 매김을 먼저 게시하겠습니다.
최종 결과를 살펴 보겠습니다.
Angular.js 코드 스타일은 매우 인기가 있으며 수십 줄의 코드 라인이 위의 기능을 명확하고 간결하게 구현한다고 말해야합니다.
우선, 테이블의 데이터 소스는 Server.js에서 나옵니다. 클릭하여 다운로드하십시오. 번호를 가져온 다음 페이지에 표시하십시오.
1. 테이블은 NG-Repeat를 통해 표시되며 코드는 다음과 같습니다.
<table> <tr> <th> index </th> <th ng-repeat = "(x, y) 항목 [0]"> {{x}} </th> </tr> <tr ng-repeat = "x in icem"> <td> {{$ index + 1}} </td> <td ng-bind = "x.name"> ng-bind = "x.city"> </td> <td ng-bind = "x.country"> </td> </tr> </table>$ index는 반복의 기본 매개 변수입니다. 테이블의 열 헤더는 데이터 소스 (JSON)의 첫 번째 행을 통해 반복되는 키 값입니다. 물론, 부트 스트랩이 테이블 클래스가 테이블 테이블 바깥 쪽을 지정 해야하는 경우.
2. Pagination은 NG-Repeat도 사용합니다. 나는 NG-Repeat가 일반적인 지시라고 말해야합니다.
페이징 코드는 다음과 같습니다.
<av> <ul> <li> <a ng-click = "previous ()"> <prevery () "> <span> previous page </li> <li ng-repeat ="pagelist "ng class ="{active : isactivepage (page)} "> <a ng-click ="selectPage (page) "> {page} <<<a >> <<<an> {page}. ng-click = "next ()"> <span> 다음 페이지 </span> </a> </li> </ul> </nav>여기서는 NG- 클릭 이벤트 지침을 사용합니다. 또한 NG 클래스 명령을 사용했습니다
ng-class = "{active : isactivepage (page)}"위의 코드는 페이지 매김을 위해 선택된 스타일입니다.
이 테이블은 페이지에 페이징을 추가하여 가짜 페이징이며, 백엔드의 데이터를 한 번 가져 와서 다른 페이징을 통해 JSON의 필터링 된 데이터를 표시합니다.
특정 코드 + 댓글 :
<! docType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> </head> <! 파일-> <link rel = "stylesheet"href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <style> #divmain {width : 500px; margin : 0 auto; margin-top : 100px; 50px;}. Pagination {오른쪽 : 0px; 위치 : 절대; 상단; 상단 : -30px;} nav li {cursor : pointer;} </style> <divmain "ng-app ="myApp "ng-controller ="myctrl "> <table> <tt> <th> index </th> <th ng-repeat ="x, y). 항목 [0] "> {{x}} </th> </tr> </tr> <tr ng-repeat ="x in imet "> <td> {{$ index + 1}} </td> <td ng-bind ="x.name "> </td> <td ng-bind ="x.city "> ng-bind = "x.country"> </td> </tr> </table> <av> <ul> <li> <a ng-click = "previous ()"> <span> previous page </li> </li> <li ng-repeat = "page in page"ng class = "{inctivepage (page)" "a ng-click ="a ng-clice = "a ng-clice ="page in inctivepage (page) ". > {{page}} </a> </a> </li> <li> <a ng-click = "next ()"> <span> 다음 페이지 </li> </a> </li> </ul> </div> <스크립트 src = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"> </script> <cript> var app = angular.module ( "myapp", []); App.controller ( "myctrl", function, $ http). {$ http.get ( "service.js"). 다음 (함수 (응답) {// data source $ scope.data.data.records; // 총 페이지 $ scope.pagesize = 5; $ scope.pages = math.ceil ($ scope.data.length/$ scope.pagesize); : $ scope.pages; $ scope.pagelist = []; $ scope.selpage = 1; // 테이블 데이터 소스를 설정 (paging) $ scope.setdata = function () {$ scope.items = $ scope.data.slice (($ scope.pagesize * ($ scope.selpage -1)); 현재 페이지 수} $ scope.items = $ scope.data.slice (0, $ scope.pagesize)에 의해 표에 표시된 데이터가 표시됩니다. // Pagination이 반복 될 배열 (var i = 0; i <$ scope.newpages; i ++) {$ scope.pagelist.push (i+1); $ scope.selectpage = function (page) {// 최대 IF (page <1 || page> $ scope.pages) 반환; // 최대 페이지 수는 5if (page> 2) {// 5 페이지 만 표시되므로 2 페이지보다 더 큰 페이지가 시작되기 때문에 Var NewPagelist = [] (page -3); ? pages : (page + 2)) {newPagelist.push (i + 1);} $ scope.pagelist. $ scope.isActivePage = function (page) {return $ scope.selpage == page;}; // 이전 페이지 $ page $ scope.previous = function () {$ scope.selpage ($ scope.selpage -1);} // 다음 페이지 $ scope.next = function () {$ scope.selpage ($ scope.selpage. 1);};});}) </script> </body> </html>편집자는 angular.js와 bootstrap의 조합에 대해 많은 것을 소개하여 테이블 페이징 코드를 구현할 것입니다.