โฟกัสการปนเปื้อนของ AngularJs สะท้อนให้เห็นในการใช้ตัวกรอง ตัวกรองนี้ไม่ซับซ้อนเช่นกัน
ก่อนอื่นใส่รหัส HTML:
<! doctype html> <html ng-app = "demoapp"> <head> <meta charset = "utf-"> <meta name = "viewport" content = "width = device-width"> <title> demo </title> ng-controller = "democtrl"> <div> <ul> <li ng-repeat = "ประโยคใน demolists []. name | paging: currentpage*listsperpage | limitto: listsperpage"> {{sentences}} </li> ng-click = "prevPage ()"> หน้าก่อนหน้า </a> <a ng-class = "{true: 'currentstep', เท็จ: 'step'} [num == currentpage]" ng-repeat = "num ใน pagenum" ng-click = "num-repeat ng-click = "NextPage ()"> หน้าถัดไป </a> </div> </div> <script src = "angular.min.js"> </script> <!-แนะนำไฟล์ AngularJs ของคุณ-> <script src = "demo.js"NG-Class ใช้ที่นี่ เมื่อหน้าปัจจุบันหน้าปัจจุบันเท่ากับหมายเลขหน้าจำนวนรูปแบบ currentstep จะปรากฏขึ้นและเมื่อไม่เท่ากันรูปแบบขั้นตอนจะปรากฏขึ้น
รหัสคีย์อยู่ใน 13 บรรทัด เมื่อ NG-Repeat จำลองข้อมูลตัวกรองจะเรียกว่าเพจและตัวกรองตัวกรองเชิงมุม
จากนั้นก็มีรหัส CSS ไม่มีอะไรจะพูดส่วนใหญ่เพื่อปรับสไตล์ อย่าลืมเพิ่มสองสไตล์ใน NG-Class
ul> li {list-style: none; width: px; ความสูง: px; border: px solid #caf; margin-bottom: px; padding-left: px;}. nextlink, .prevlink {font-size: px; px; px; px; px; px; ไม่มี; พื้นหลัง: #FFF; Float: ซ้าย; เคอร์เซอร์: ตัวชี้;} A.Prevlink: Hover, A.Neextlink: โฮเวอร์ {พื้นหลัง: #aaa! สำคัญ; สี: #ffff! สำคัญ; เคอร์เซอร์: ตัวชี้;}. ขั้นตอน {จอแสดงผล: บล็อก; px; font-size: px; float: ซ้าย; ระยะขอบ: px; list-style: none; Cursor: pointer;}. currentstep {สีชายแดน: #ffff; padding: px; color: #f; font-weight: bolat; px; list-style: none; Cursor: Pointer;}ในที่สุดก็คือ JS
var demoapp = angular.module ('demoapp', []); demoapp.filter ('paging', ฟังก์ชั่น () {// ฟังก์ชั่นการส่งคืนตัวกรองเพจ (รายการ, เริ่มต้น) {// สองรายการพารามิเตอร์คือข้อมูลดิบ lists.slice (เริ่มต้น); // แบ่งส่วนข้อมูลต้นฉบับตามเริ่มต้น};}); demoapp.controller ('democtrl', ['$ scope', ฟังก์ชั่น ($ scope) {// หน้าคอนโทรลเลอร์ $ scope.demolists = [// simulate data นักพัฒนา. ',' ขอบคุณสำหรับการอ่านสิ่งนี้ ',' ทำไมฉันพูดขอบคุณ 'เพราะสิ่งนี้ไม่มีอะไรเกี่ยวข้องกับการเรียน angularjs ของคุณ', 'นี่เป็นเพียงประโยคสาธิต', 'ไม่มีความหมายพิเศษใด ๆ ' และคุณยังต้องใช้เวลาในการอ่านแถวนี้ ' $ scope.demolists []. name.length; i =; i <$ scope.pages; i ++) {$ scope.pagenum.push (i);} $ scope.currentPage =; หน้า} $ scope.prevPage = function () {// คลิกฟังก์ชั่นที่ดำเนินการในหน้าก่อนหน้าถ้า ($ scope.currentPage>) {$ scope.currentPage-;}} $ scope.nextpage = function () {// คลิกฟังก์ชั่นที่ดำเนินการในหน้าถัดไป $ scope.pages-) {$ spope.currentPage ++;}}}]);ฉันอยากจะบอกว่า pagenum ที่คุณสร้างเริ่มต้นจาก 0 แต่หมายเลขหน้าจริงเริ่มต้นจากจุดเริ่มต้นดังนั้นนี่คือสาเหตุที่ 18 บรรทัดใน HTML คือ NUM +1
เนื้อหาข้างต้นคือรหัสที่ AngularJS ใช้ฟังก์ชั่นการเพจโดยไม่มีจุดไข่ปลาแนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะช่วยคุณได้ หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ AngularJs โปรดให้ความสนใจกับเว็บไซต์ Wulin.com!