ตาราง AngularJS: การเรียงลำดับ, OrderBy & ตัวกรองตัวพิมพ์ใหญ่ [ตัวอย่าง]
ตารางเป็นหนึ่งในองค์ประกอบทั่วไปที่ใช้ใน HTML เมื่อทำงานกับหน้าเว็บ
ตารางใน HTML ได้รับการออกแบบโดยใช้แท็ก HTML
- tag – นี่คือแท็กหลักที่ใช้สำหรับแสดงตาราง
- – แท็กนี้ใช้สำหรับแยกแถวภายในตาราง
- – แท็กนี้ใช้สำหรับแสดงข้อมูลตารางจริง
- – ใช้สำหรับข้อมูลส่วนหัวของตาราง
การใช้แท็ก HTML ที่มีอยู่ข้างต้นพร้อมกับ AngularJSเราสามารถทำให้การเติมข้อมูลตารางง่ายขึ้นได้ กล่าวโดยสรุปคือ คำสั่ง ng-repeat ใช้เพื่อกรอกข้อมูลตาราง
เราจะมาดูวิธีการบรรลุเป้าหมายนี้ในบทนี้ นอกจากนี้เรายังจะดูวิธีที่เราสามารถใช้ตัวกรอง orderby และตัวพิมพ์ใหญ่พร้อมกับการใช้แอตทริบิวต์ $index เพื่อแสดงดัชนีตารางเชิงมุม
เติมและแสดงข้อมูลในตาราง
ดังที่เราได้พูดคุยไปแล้วในบทนำของบทนี้ พื้นฐานสำหรับการสร้างโครงสร้างตารางในหน้า HTML ยังคงเหมือนเดิม
โครงสร้างของตารางยังคงถูกสร้างขึ้นโดยใช้แท็ก HTML ปกติของ - - และ - อย่างไรก็ตาม ข้อมูลจะถูกเติมโดยใช้คำสั่ง ng-repeat ใน AngularJS
มาดูตัวอย่างง่ายๆ ของวิธีที่เราสามารถนำตาราง Angular ไปใช้
ในตัวอย่างนี้
เราจะสร้างตารางเชิงมุมซึ่งจะมีหัวข้อของหลักสูตรพร้อมกับคำอธิบาย
ขั้นตอน 1) ก่อนอื่นเราจะเพิ่มแท็ก “style” ลงในหน้า HTML เพื่อให้สามารถแสดงตารางเป็นตารางที่เหมาะสมได้
- แท็กสไตล์จะถูกเพิ่มลงในหน้า HTML นี่เป็นวิธีมาตรฐานในการเพิ่มแอตทริบิวต์การจัดรูปแบบที่จำเป็นสำหรับองค์ประกอบ HTML
- เรากำลังเพิ่มค่าสไตล์สองค่าลงในตารางของเรา
- ประการหนึ่งคือควรมีเส้นขอบทึบสำหรับตาราง Angular ของเราและ
- ประการที่สองคือควรมีการเสริมสำหรับข้อมูลตารางเชิงมุมของเรา
ขั้นตอน 2) ขั้นตอนต่อไปคือการเขียนโค้ดเพื่อสร้างตารางและเป็นข้อมูล
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial"> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
คำอธิบายรหัส
- ขั้นแรกเรากำลังสร้างตัวแปรที่เรียกว่า "บทช่วยสอน" และกำหนดคู่คีย์-ค่าให้กับมันในขั้นตอนเดียว คู่คีย์-ค่าแต่ละคู่จะถูกใช้เป็นข้อมูลเมื่อแสดงตาราง จากนั้นตัวแปรบทช่วยสอนจะถูกกำหนดให้กับวัตถุขอบเขตเพื่อให้สามารถเข้าถึงได้จากมุมมองของเรา
- นี่เป็นขั้นตอนแรกในการสร้างตาราง และเราใช้ แท็ก
- เราใช้คำสั่ง "ng-repeat" สำหรับแต่ละแถวของข้อมูล คำสั่งนี้จะผ่านคู่คีย์-ค่าแต่ละคู่ในออบเจ็กต์ขอบเขตการสอนโดยใช้ตัวแปร ptutor
- ในที่สุดเราก็ใช้ แท็กพร้อมกับคู่คีย์-ค่า (ptutor.Name และ ptutor.Description) เพื่อแสดงข้อมูลตารางเชิงมุม
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
เอาท์พุต
จากผลลัพธ์ข้างต้น
- เราจะเห็นได้ว่าตารางจะแสดงอย่างถูกต้องด้วยข้อมูลจากอาร์เรย์ของคู่คีย์-ค่าที่กำหนดไว้ในตัวควบคุม
- ข้อมูลตารางถูกสร้างขึ้นโดยผ่านคู่คีย์-ค่าแต่ละคู่โดยใช้คำสั่ง "ng-repeat"
ตัวกรองในตัว AngularJS
เป็นเรื่องปกติมากที่จะใช้ตัวกรองภายใน AngularJS เพื่อเปลี่ยนวิธีแสดงข้อมูลในตาราง เราได้เห็นการใช้งานตัวกรองไปแล้วในบทก่อนหน้านี้ มาสรุปตัวกรองอย่างรวดเร็วกันก่อนจะดำเนินการต่อ
ใน Angular.JS ตัวกรองใช้เพื่อจัดรูปแบบค่าของนิพจน์ก่อนที่จะแสดงให้ผู้ใช้เห็น ตัวอย่างของตัวกรองคือตัวกรอง 'ตัวพิมพ์ใหญ่' ซึ่งรับเอาต์พุตสตริงและจัดรูปแบบสตริงและแสดงอักขระทั้งหมดในสตริงเป็นตัวพิมพ์ใหญ่
ดังนั้นในตัวอย่างด้านล่าง หากค่าของตัวแปร 'TutorialName' คือ 'AngularJS' ผลลัพธ์ของนิพจน์ด้านล่างจะเป็น 'ANGULARJS'
{{ TurotialName | uppercase }}
ในส่วนนี้ เราจะมาดูวิธีการใช้ตัวกรอง orderBy และตัวพิมพ์ใหญ่ในตารางโดยละเอียดมากขึ้น
จัดเรียงตารางด้วยตัวกรอง OrderBy
ตัวกรองนี้ใช้เพื่อเรียงลำดับตารางตามคอลัมน์ตารางใดคอลัมน์หนึ่ง ในตัวอย่างก่อนหน้านี้ ผลลัพธ์สำหรับข้อมูลตาราง Angular ของเราปรากฏดังที่แสดงด้านล่าง
ตัวควบคุม | ผู้ควบคุมในการดำเนินการ |
Models | แบบจำลองและข้อมูลการเชื่อมโยง |
คำแนะนำ | ความยืดหยุ่นของคำสั่ง |
มาดูตัวอย่างว่าเราสามารถใช้ตัวกรอง “orderBy” และจัดเรียงข้อมูลตารางเชิงมุมโดยใช้คอลัมน์แรกในตารางได้อย่างไร
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'"> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
คำอธิบายรหัส
- เรากำลังใช้โค้ดเดียวกับที่เราทำในการสร้างตาราง ข้อแตกต่างเพียงอย่างเดียวในครั้งนี้คือเราใช้ตัวกรอง "orderBy" ร่วมกับคำสั่ง ng-repeat ในกรณีนี้ เรากำลังบอกว่าเราต้องการจัดลำดับโต๊ะโดยใช้คีย์ "ชื่อ"
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
เอาท์พุต
จากผลลัพธ์ที่ได้
- เราจะเห็นว่าข้อมูลในตาราง Angular ได้รับการจัดเรียงตามข้อมูลในคอลัมน์แรก ในชุดข้อมูลของเรา ข้อมูล “คำสั่ง” มาจากข้อมูล “แบบจำลอง” แต่เนื่องจากเราใช้ตัวกรอง orderBy ตารางจึงได้รับการจัดเรียงตามนั้น
ตารางแสดงผลพร้อมตัวกรองตัวพิมพ์ใหญ่
นอกจากนี้เรายังสามารถใช้ตัวกรองตัวพิมพ์ใหญ่เพื่อเปลี่ยนข้อมูลในตาราง Angular เป็นตัวพิมพ์ใหญ่
ลองมาดูตัวอย่างว่าเราจะบรรลุเป้าหมายนี้ได้อย่างไร
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial"> <td>{{ptutor.Name | uppercase}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
คำอธิบายรหัส
- เรากำลังใช้โค้ดเดียวกันกับที่เราใช้สร้างตาราง ความแตกต่างเพียงอย่างเดียวในครั้งนี้คือเราใช้ตัวกรองตัวพิมพ์ใหญ่ เราใช้ตัวกรองนี้ร่วมกับ "ptutor.Name" เพื่อให้ข้อความทั้งหมดในคอลัมน์แรกแสดงเป็นตัวพิมพ์ใหญ่
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
เอาท์พุต
จากผลลัพธ์ที่ได้
- เราจะเห็นได้ว่าการใช้ตัวกรอง “ตัวพิมพ์ใหญ่” จะทำให้ข้อมูลทั้งหมดในคอลัมน์แรกแสดงด้วยอักขระตัวพิมพ์ใหญ่
แสดงดัชนีตาราง ($index)
หากต้องการแสดงดัชนีตาราง ให้เพิ่ม a ด้วย $index.
ลองมาดูตัวอย่างว่าเราจะบรรลุเป้าหมายนี้ได้อย่างไร
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial"> <td>{{$index + 1}}</td> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
คำอธิบายรหัส
- เรากำลังใช้โค้ดเดียวกันกับที่เราใช้ในการสร้างตาราง ความแตกต่างในครั้งนี้เพียงอย่างเดียวคือ เรากำลังเพิ่มแถวพิเศษลงในตารางเพื่อแสดงคอลัมน์ดัชนี ในคอลัมน์เพิ่มเติมนี้ เรากำลังใช้คุณสมบัติ “$index” ที่ AngularJS จัดเตรียมไว้ จากนั้นใช้ตัวดำเนินการ +1 เพื่อเพิ่มดัชนีสำหรับแต่ละแถว
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
เอาท์พุต
จากผลลัพธ์ที่ได้
- คุณจะเห็นว่ามีการสร้างคอลัมน์เพิ่มเติมแล้ว ในคอลัมน์นี้ เราจะเห็นดัชนีที่ถูกสร้างขึ้นสำหรับแต่ละแถว
สรุป
- โครงสร้างตารางถูกสร้างขึ้นโดยใช้แท็กมาตรฐานที่มีอยู่ภายใน HTML- ข้อมูลในตารางถูกเติมโดยใช้คำสั่ง "ng-repeat"
- ตัวกรอง orderBy สามารถใช้เพื่อจัดเรียงตารางตามคอลัมน์ใดๆ ภายในตาราง
- ตัวกรองตัวพิมพ์ใหญ่สามารถใช้เพื่อแสดงข้อมูลในคอลัมน์ตามข้อความใด ๆ ที่เป็นตัวพิมพ์ใหญ่
- คุณสมบัติ “$index” สามารถใช้เพื่อสร้างดัชนีสำหรับตารางได้
- ปัญหาทั่วไปประการหนึ่งที่พบในระหว่างการพัฒนาด้วยตาราง AngularJS.JS คือการใช้งานชุดข้อมูลขนาดใหญ่ซึ่งมีข้อมูลมากกว่า 1000 แถว บางครั้ง ng-ซ้ำ คำสั่งอาจไม่ตอบสนอง และด้วยเหตุนี้ทั้งหน้าจึงไม่ตอบสนองในบางครั้ง ในกรณีเช่นนี้ ควรมีการแบ่งหน้าซึ่งแถวข้อมูลจะกระจายไปหลายหน้าจะดีกว่าเสมอ