ก่อนอื่นให้ฉันแนะนำแนวคิดพื้นฐานของ Angular.js และ bootstrap สั้น ๆ
AngularJS เป็นกรอบ JavaScript สามารถเพิ่มไปยังหน้า HTML ผ่านแท็ก <Script>
AngularJS ขยาย HTML ผ่านคำสั่งและผูกข้อมูลกับ HTML ผ่านนิพจน์
Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
ฉันได้เรียนรู้เชิงมุมเมื่อเร็ว ๆ นี้และได้ฝึกฝนการสาธิตมากมายในระหว่างกระบวนการเรียนรู้ ที่นี่ฉันจะโพสต์แบบฟอร์ม + การแบ่งหน้าก่อน
มาดูผลลัพธ์สุดท้าย:
ฉันต้องบอกว่ารูปแบบรหัส angular.js เป็นที่นิยมมากและมีรหัสหลายสิบบรรทัดอย่างชัดเจนและใช้งานฟังก์ชั่นข้างต้นอย่างรัดกุม
ก่อนอื่นแหล่งข้อมูลของตารางมาจาก Server.js คลิกเพื่อดาวน์โหลด รับหมายเลขแล้วแสดงบนหน้า
1. ตารางจะแสดงผ่าน NG-repeat และรหัสมีดังนี้:
<table> <tr> <th> ดัชนี </th> <th ng-repeat = "(x, y) ในรายการ [0]"> {{x}} </th> </tr> <tr ng-repeat = "x ในรายการ"> <td> {{$ index + 1}} ng-bind = "x.city"> </td> <td ng-bind = "x.country"> </td> </tr> </table>$ index เป็นพารามิเตอร์เริ่มต้นของการทำซ้ำ ส่วนหัวคอลัมน์ของตารางคือค่าคีย์ลูปผ่านแถวแรกของแหล่งข้อมูล (JSON) แน่นอนถ้า bootstrap จำเป็นต้องระบุว่าคลาสของตารางเป็นตารางตารางตาราง
2. การแบ่งหน้ายังใช้ NG-repeat ฉันต้องบอกว่า NG-Repeat เป็นคำแนะนำทั่วไป
รหัสเพจมีดังนี้:
<av> <ul> <li> <a ng-click = "previous ()"> <pan> หน้าก่อนหน้า </span> </a> </li> <li ng-repeat = "หน้าใน pagelist" ng-class = "{active: isactive (หน้า)}"> <a ng-click = "selectpage (หน้า) ng-click = "next ()"> <pan> หน้าถัดไป </span> </a> </li></ul> </av>ที่นี่เราใช้คำแนะนำเหตุการณ์ NG-click ยังใช้คำสั่ง ng-class
ng-class = "{active: isactivePage (หน้า)}"รหัสด้านบนเป็นสไตล์ที่เลือกสำหรับการปนเปื้อน
ตารางนี้เพิ่มการเพจลงในหน้าเป็นเพจปลอมซึ่งใช้ข้อมูลจากแบ็กเอนด์หนึ่งครั้งและแสดงข้อมูลที่ผ่านการกรองของ JSON ผ่านการเพจที่แตกต่างกัน
รหัสเฉพาะ + ความคิดเห็น:
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "html; charset = utf-8" ไฟล์ css-> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <style> #divmain {ความกว้าง: 500px; 50px;}. การแบ่งแยก {ขวา: 0px; ตำแหน่ง: สัมบูรณ์; top: -30px;} nav li {เคอร์เซอร์: ตัวชี้;} </style> <div id = "divmain" ng-app = "myapp" ng-controller = "myctrl"> <table> รายการ [0] "> {{x}} </th> </tr> <tr ng-repeat =" x ในรายการ "> <td> {{$ index + 1}} </td> <td ng-bind =" x.name "> </td> <td ng-bind =" X.City " ng-bind = "x.country"> </td> </tr> </table> <nav> <ul> <li> <a ng-click = "previous ()"> <span> หน้าก่อนหน้า </span> </a> </li> > {{page}} </a> </li> <li> <a ng-click = "next ()"> <pan> หน้าถัดไป </span> </a> </li></ul> </av> </div> src = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"> </script> <script> var app = angular.module ("myapp", []); app.controller ("myctrl" {$ http.get ("service.js"). จากนั้น (ฟังก์ชั่น (การตอบสนอง) {// แหล่งข้อมูล $ scope.data = response.data.records; // จำนวนทั้งหมดของหน้า $ scope.pagesize = 5; $ scope.pages = math.cope. $ scope.pages> 5? 5: $ scope.pages; $ scope.pagelist = []; $ scope.selpage = 1; // ตั้งค่าแหล่งข้อมูลตาราง (เพจ) $ scope.setData = function () {$ scope.items = $ scope.data.slice $ scope.pagesize)); // กรองข้อมูลที่แสดงปัจจุบันในตารางโดยจำนวนหน้าปัจจุบัน} $ scope.items = $ scope.data.slice (0, $ scope.pagesize); // array ที่ {scope. newpages; 1);} // พิมพ์ดัชนีหน้าเว็บที่เลือกในปัจจุบัน $ scope.selectPage = ฟังก์ชั่น (หน้า) {// ไม่น้อยกว่า 1 สูงสุดถ้า (หน้า <1 || หน้า> $ scope.pages) กลับมา; 3); i <(หน้า + 2)> $ scope.pages? $ scope.pages: (หน้า + 2)); หน้า);}; // ตั้งค่าหน้าสไตล์ที่เลือกไว้ในปัจจุบัน $ scope.isactivePage = function (หน้า) {return $ scope.selpage == หน้า;}; // หน้าก่อนหน้า $ scope.previous = function () {$ scope.selpage ($ scope.selpage - 1); 1);};});}) </script> </body> </html>บรรณาธิการจะแนะนำคุณมากมายเกี่ยวกับการรวมกันของ Angular.js และ bootstrap เพื่อใช้รหัสการเพจตารางและฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!