ตาราง AngularJS: การเรียงลำดับ, OrderBy & ตัวกรองตัวพิมพ์ใหญ่ [ตัวอย่าง]

ตารางเป็นหนึ่งในองค์ประกอบทั่วไปที่ใช้ใน HTML เมื่อทำงานกับหน้าเว็บ

ตารางใน HTML ได้รับการออกแบบโดยใช้แท็ก HTML

  1. tag – นี่คือแท็กหลักที่ใช้สำหรับแสดงตาราง
  2. – แท็กนี้ใช้สำหรับแยกแถวภายในตาราง
  3. – แท็กนี้ใช้สำหรับแสดงข้อมูลตารางจริง
  4. – ใช้สำหรับข้อมูลส่วนหัวของตาราง

การใช้แท็ก HTML ที่มีอยู่ข้างต้นพร้อมกับ AngularJSเราสามารถทำให้การเติมข้อมูลตารางง่ายขึ้นได้ กล่าวโดยสรุปคือ คำสั่ง ng-repeat ใช้เพื่อกรอกข้อมูลตาราง

เราจะมาดูวิธีการบรรลุเป้าหมายนี้ในบทนี้ นอกจากนี้เรายังจะดูวิธีที่เราสามารถใช้ตัวกรอง orderby และตัวพิมพ์ใหญ่พร้อมกับการใช้แอตทริบิวต์ $index เพื่อแสดงดัชนีตารางเชิงมุม

เติมและแสดงข้อมูลในตาราง

ดังที่เราได้พูดคุยไปแล้วในบทนำของบทนี้ พื้นฐานสำหรับการสร้างโครงสร้างตารางในหน้า HTML ยังคงเหมือนเดิม

โครงสร้างของตารางยังคงถูกสร้างขึ้นโดยใช้แท็ก HTML ปกติของ - - และ - อย่างไรก็ตาม ข้อมูลจะถูกเติมโดยใช้คำสั่ง ng-repeat ใน AngularJS
มาดูตัวอย่างง่ายๆ ของวิธีที่เราสามารถนำตาราง Angular ไปใช้
ในตัวอย่างนี้

เราจะสร้างตารางเชิงมุมซึ่งจะมีหัวข้อของหลักสูตรพร้อมกับคำอธิบาย

ขั้นตอน 1) ก่อนอื่นเราจะเพิ่มแท็ก “style” ลงในหน้า HTML เพื่อให้สามารถแสดงตารางเป็นตารางที่เหมาะสมได้

เติมและแสดงข้อมูลในตาราง

  1. แท็กสไตล์จะถูกเพิ่มลงในหน้า HTML นี่เป็นวิธีมาตรฐานในการเพิ่มแอตทริบิวต์การจัดรูปแบบที่จำเป็นสำหรับองค์ประกอบ HTML
  2. เรากำลังเพิ่มค่าสไตล์สองค่าลงในตารางของเรา
  • ประการหนึ่งคือควรมีเส้นขอบทึบสำหรับตาราง 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>

คำอธิบายรหัส

  1. ขั้นแรกเรากำลังสร้างตัวแปรที่เรียกว่า "บทช่วยสอน" และกำหนดคู่คีย์-ค่าให้กับมันในขั้นตอนเดียว คู่คีย์-ค่าแต่ละคู่จะถูกใช้เป็นข้อมูลเมื่อแสดงตาราง จากนั้นตัวแปรบทช่วยสอนจะถูกกำหนดให้กับวัตถุขอบเขตเพื่อให้สามารถเข้าถึงได้จากมุมมองของเรา
  2. นี่เป็นขั้นตอนแรกในการสร้างตาราง และเราใช้ แท็ก
  3. เราใช้คำสั่ง "ng-repeat" สำหรับแต่ละแถวของข้อมูล คำสั่งนี้จะผ่านคู่คีย์-ค่าแต่ละคู่ในออบเจ็กต์ขอบเขตการสอนโดยใช้ตัวแปร ptutor
  4. ในที่สุดเราก็ใช้ แท็กพร้อมกับคู่คีย์-ค่า (ptutor.Name และ ptutor.Description) เพื่อแสดงข้อมูลตารางเชิงมุม

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

เอาท์พุต

เติมและแสดงข้อมูลในตาราง

จากผลลัพธ์ข้างต้น

  • เราจะเห็นได้ว่าตารางจะแสดงอย่างถูกต้องด้วยข้อมูลจากอาร์เรย์ของคู่คีย์-ค่าที่กำหนดไว้ในตัวควบคุม
  • ข้อมูลตารางถูกสร้างขึ้นโดยผ่านคู่คีย์-ค่าแต่ละคู่โดยใช้คำสั่ง "ng-repeat"

ตัวกรองในตัว AngularJS

เป็นเรื่องปกติมากที่จะใช้ตัวกรองภายใน AngularJS เพื่อเปลี่ยนวิธีแสดงข้อมูลในตาราง เราได้เห็นการใช้งานตัวกรองไปแล้วในบทก่อนหน้านี้ มาสรุปตัวกรองอย่างรวดเร็วกันก่อนจะดำเนินการต่อ

ใน Angular.JS ตัวกรองใช้เพื่อจัดรูปแบบค่าของนิพจน์ก่อนที่จะแสดงให้ผู้ใช้เห็น ตัวอย่างของตัวกรองคือตัวกรอง 'ตัวพิมพ์ใหญ่' ซึ่งรับเอาต์พุตสตริงและจัดรูปแบบสตริงและแสดงอักขระทั้งหมดในสตริงเป็นตัวพิมพ์ใหญ่

ดังนั้นในตัวอย่างด้านล่าง หากค่าของตัวแปร 'TutorialName' คือ 'AngularJS' ผลลัพธ์ของนิพจน์ด้านล่างจะเป็น 'ANGULARJS'

{{ TurotialName | uppercase }}

ในส่วนนี้ เราจะมาดูวิธีการใช้ตัวกรอง orderBy และตัวพิมพ์ใหญ่ในตารางโดยละเอียดมากขึ้น

จัดเรียงตารางด้วยตัวกรอง OrderBy

ตัวกรองนี้ใช้เพื่อเรียงลำดับตารางตามคอลัมน์ตารางใดคอลัมน์หนึ่ง ในตัวอย่างก่อนหน้านี้ ผลลัพธ์สำหรับข้อมูลตาราง Angular ของเราปรากฏดังที่แสดงด้านล่าง

ตัวควบคุม ผู้ควบคุมในการดำเนินการ
Models แบบจำลองและข้อมูลการเชื่อมโยง
คำแนะนำ ความยืดหยุ่นของคำสั่ง

มาดูตัวอย่างว่าเราสามารถใช้ตัวกรอง “orderBy” และจัดเรียงข้อมูลตารางเชิงมุมโดยใช้คอลัมน์แรกในตารางได้อย่างไร

จัดเรียงตารางด้วยตัวกรอง 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>

คำอธิบายรหัส

  1. เรากำลังใช้โค้ดเดียวกับที่เราทำในการสร้างตาราง ข้อแตกต่างเพียงอย่างเดียวในครั้งนี้คือเราใช้ตัวกรอง "orderBy" ร่วมกับคำสั่ง ng-repeat ในกรณีนี้ เรากำลังบอกว่าเราต้องการจัดลำดับโต๊ะโดยใช้คีย์ "ชื่อ"

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

เอาท์พุต

จัดเรียงตารางด้วยตัวกรอง OrderBy

จากผลลัพธ์ที่ได้

  • เราจะเห็นว่าข้อมูลในตาราง 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>

คำอธิบายรหัส

  1. เรากำลังใช้โค้ดเดียวกันกับที่เราใช้สร้างตาราง ความแตกต่างเพียงอย่างเดียวในครั้งนี้คือเราใช้ตัวกรองตัวพิมพ์ใหญ่ เราใช้ตัวกรองนี้ร่วมกับ "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>

คำอธิบายรหัส

  1. เรากำลังใช้โค้ดเดียวกันกับที่เราใช้ในการสร้างตาราง ความแตกต่างในครั้งนี้เพียงอย่างเดียวคือ เรากำลังเพิ่มแถวพิเศษลงในตารางเพื่อแสดงคอลัมน์ดัชนี ในคอลัมน์เพิ่มเติมนี้ เรากำลังใช้คุณสมบัติ “$index” ที่ AngularJS จัดเตรียมไว้ จากนั้นใช้ตัวดำเนินการ +1 เพื่อเพิ่มดัชนีสำหรับแต่ละแถว

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

เอาท์พุต

แสดงดัชนีตาราง

จากผลลัพธ์ที่ได้

  • คุณจะเห็นว่ามีการสร้างคอลัมน์เพิ่มเติมแล้ว ในคอลัมน์นี้ เราจะเห็นดัชนีที่ถูกสร้างขึ้นสำหรับแต่ละแถว

สรุป

  • โครงสร้างตารางถูกสร้างขึ้นโดยใช้แท็กมาตรฐานที่มีอยู่ภายใน HTML- ข้อมูลในตารางถูกเติมโดยใช้คำสั่ง "ng-repeat"
  • ตัวกรอง orderBy สามารถใช้เพื่อจัดเรียงตารางตามคอลัมน์ใดๆ ภายในตาราง
  • ตัวกรองตัวพิมพ์ใหญ่สามารถใช้เพื่อแสดงข้อมูลในคอลัมน์ตามข้อความใด ๆ ที่เป็นตัวพิมพ์ใหญ่
  • คุณสมบัติ “$index” สามารถใช้เพื่อสร้างดัชนีสำหรับตารางได้
  • ปัญหาทั่วไปประการหนึ่งที่พบในระหว่างการพัฒนาด้วยตาราง AngularJS.JS คือการใช้งานชุดข้อมูลขนาดใหญ่ซึ่งมีข้อมูลมากกว่า 1000 แถว บางครั้ง ng-ซ้ำ คำสั่งอาจไม่ตอบสนอง และด้วยเหตุนี้ทั้งหน้าจึงไม่ตอบสนองในบางครั้ง ในกรณีเช่นนี้ ควรมีการแบ่งหน้าซึ่งแถวข้อมูลจะกระจายไปหลายหน้าจะดีกว่าเสมอ