ตาราง AngularJS: เรียงลำดับด้วย orderBy และตัวกรองตัวพิมพ์ใหญ่

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

⚡ สรุปอย่างชาญฉลาด

การเรียงลำดับ การจัดลำดับ และการจัดรูปแบบข้อความในตาราง AngularJS นั้นอาศัยคำสั่ง ng-repeat ร่วมกับนิพจน์ filter หน้านี้แสดงวิธีการใช้ orderBy, uppercase, filter และ $index เพื่อเปลี่ยนตาราง HTML ธรรมดาให้กลายเป็นตารางข้อมูลแบบเรียลไทม์

  • 🧱 โครงสร้าง: แท็ก table, tr, td และ th ยังคงสร้างโครงสร้างตารางอยู่ ดังนั้นจึงไม่มีมาร์กอัปเฉพาะของ AngularJS ใดมาแทนที่ HTML มาตรฐาน
  • 🔁 ประชากร: คำสั่ง ng-repeat จะวนลูปผ่านอาร์เรย์ในอ็อบเจ็กต์ขอบเขต และแสดงผลหนึ่งแถวสำหรับทุกรายการที่พบ
  • ↕️ การเรียงลำดับ: ตัวกรอง orderBy จะเรียงลำดับแถวตามคีย์ใดก็ได้ และแฟล็ก reverse จะสลับทิศทางการเรียงลำดับตามต้องการ
  • 🔤 การจัดรูปแบบ: ตัวกรองตัวพิมพ์ใหญ่จะแปลงคอลัมน์เดียวให้เป็นตัวพิมพ์ใหญ่โดยไม่เปลี่ยนแปลงข้อมูลพื้นฐานในตัวควบคุม
  • 🔎 ค้นหา: ตัวกรองที่ผูกกับอินพุต ng-model จะลดจำนวนแถวที่มองเห็นได้เมื่อผู้อ่านพิมพ์
  • 🔢 การนับ: คุณสมบัติ $index ให้ค่าตัวนับแบบเริ่มต้นที่ศูนย์ ดังนั้นการเพิ่มหนึ่งจะทำให้ได้หมายเลขแถวที่อ่านได้
  • 🚀 ขนาด: เมื่อจำนวนแถวเกินหนึ่งพันแถว ให้ใช้ limitTo ร่วมกับการแบ่งหน้าและ track เพื่อให้หน้าเว็บแสดงผลได้อย่างเหมาะสม
อ่านเพิ่มเติม

ตาราง AngularJS

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

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

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

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

ในบทนี้ เราจะมาดูวิธีการทำให้สำเร็จกัน เราจะดูวิธีการใช้ตัวกรอง orderBy และ uppercase รวมถึงการใช้แอตทริบิวต์ $index เพื่อแสดงดัชนีตารางใน AngularJS ด้วย ขั้นตอนแรกคือการเขียนมาร์กอัปนั่นเอง

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

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

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

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

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

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

  1. แท็กสไตล์จะถูกเพิ่มลงในหน้า HTML นี่เป็นวิธีมาตรฐานในการเพิ่มแอตทริบิวต์การจัดรูปแบบที่จำเป็นสำหรับองค์ประกอบ HTML
  2. เรากำลังเพิ่มค่าสไตล์สองค่าลงในตารางของเรา
  • ประการแรกคือ ควรมีเส้นขอบทึบสำหรับตาราง AngularJS ของเรา
  • ประการที่สองคือ ควรมีการเพิ่มระยะห่าง (padding) ให้กับข้อมูลในตาราง AngularJS ของเรา

ขั้นตอน 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>

⚠️คำเตือน: รายการนี้คัดลอกมาตรงตามที่ตีพิมพ์ทุกประการ และมีสี่บรรทัดที่ผิดพลาด chrset สะกดผิด charsetมีการโหลด AngularJS สามเวอร์ชันพร้อมกัน ซึ่งมากเกินไป lib/bootstrap.js และ lib/bootstrap.css ไม่มีอยู่จริง เก็บไว้ angular.min.js เท่านั้น

Code คำอธิบาย

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

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

เอาท์พุต

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

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

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

ข้อมูลดิบเป็นเพียงจุดเริ่มต้นเท่านั้น เพราะตัวกรองจะเป็นตัวกำหนดลำดับและการจัดรูปแบบของข้อมูลเหล่านั้น

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

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

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

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

{{ TutorialName | uppercase }}

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

ตัวกรอง AngularJS ทั่วไปที่ใช้ร่วมกับตาราง

ตารางด้านล่างนี้เปรียบเทียบตัวกรองที่ใช้บ่อยที่สุดภายในนิพจน์ ng-repeat

ตัวกรอง จุดมุ่งหมาย ตัวอย่าง
สั่งซื้อโดย เรียงลำดับแถวตามคีย์ | orderBy : 'Name'
กรอง รักษาแถวที่ตรงกัน | filter : searchText
ตัวพิมพ์ใหญ่ ใช้ตัวพิมพ์ใหญ่ในข้อความ | uppercase
ตัวพิมพ์เล็ก ลดระดับข้อความ | lowercase
จำกัดถึง จำนวนแถวของหมวก | limitTo : 25
เงินตรา รูปแบบเงิน | currency : '$'
ข้อมูล รูปแบบวันที่ | date : 'dd MMM yyyy'
จำนวน ตั้งค่าทศนิยม | number : 2

การเรียงลำดับเป็นตัวกรองที่ผู้อ่านต้องการเป็นอันดับแรก ดังนั้นตัวกรอง orderBy จึงมาเป็นอันดับถัดไป

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

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

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

ลองมาดูตัวอย่างวิธีการใช้ฟิลเตอร์ “orderBy” เพื่อเรียงลำดับข้อมูลในตาราง AngularJS โดยใช้คอลัมน์แรกในตารางกัน

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

Code คำอธิบาย

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

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

เอาท์พุต

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

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

  • เราจะเห็นว่าข้อมูลในตาราง AngularJS ได้ถูกจัดเรียงตามข้อมูลในคอลัมน์แรกแล้ว อาร์เรย์ถูกประกาศในลำดับ Controllers, Models, Directives ดังนั้นหากไม่มีตัวกรอง แถวต่างๆ จะปรากฏตามลำดับนั้น การประยุกต์ใช้ orderBy : 'Name' จัดเรียงค่าชื่อตามลำดับตัวอักษร ซึ่งจะทำให้ Directive อยู่ก่อน Model และได้ผลลัพธ์เป็น Controller, Directive, Model

จัดเรียงใน Reverse และจากส่วนหัวของคอลัมน์

ตัวกรอง orderBy รับอาร์กิวเมนต์ตัวที่สอง การส่งผ่าน true เป็นการกลับทิศทาง และการจัดเก็บทั้งคีย์และแฟล็กนั้นไว้ในขอบเขตจะทำให้ผู้อ่านสามารถเรียงลำดับตารางใหม่ได้โดยการคลิกที่ส่วนหัว ดังที่ สั่งซื้อโดยอ้างอิง อธิบาย

<table>
    <tr>
        <th ng-click="sortKey='Name'; reverse=!reverse">Name</th>
        <th ng-click="sortKey='Description'; reverse=!reverse">Description</th>
    </tr>
    <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

การเรียงลำดับจะเปลี่ยนลำดับของแถว ตัวกรองถัดไปจะเปลี่ยนวิธีการอ่านคอลัมน์เดียว

บทความที่เกี่ยวข้อง

ตารางแสดงผลพร้อมตัวกรองตัวพิมพ์ใหญ่

เราสามารถใช้ตัวกรองตัวพิมพ์ใหญ่เพื่อเปลี่ยนข้อมูลในตาราง AngularJS ให้เป็นตัวพิมพ์ใหญ่ได้เช่นกัน

ลองมาดูตัวอย่างว่าเราจะบรรลุเป้าหมายนี้ได้อย่างไร

ตารางแสดงผลพร้อมตัวกรองตัวพิมพ์ใหญ่

<!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>

Code คำอธิบาย

  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>

Code คำอธิบาย

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

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

เอาท์พุต

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

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

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

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

วิธีการกรองและค้นหาข้อมูลในตาราง AngularJS

AngularJS มาพร้อมกับฟิลเตอร์ชื่อ... filterเมื่อวางไว้หลัง ng-repeat โค้ดนี้จะเปรียบเทียบทุกรายการในอาร์เรย์กับค่าที่กำหนด และเก็บเฉพาะแถวที่ตรงกันเท่านั้น ผูกค่าดังกล่าวเข้ากับกล่องข้อความด้วย ng-model แล้วตารางจะแคบลงเองขณะที่ผู้อ่านพิมพ์ โดยไม่ต้องใช้ตัวจัดการเหตุการณ์หรือโค้ดคอนโทรลเลอร์ใดๆ

เพิ่มการค้นหาแบบเรียลไทม์ Box

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

<input type="text" ng-model="searchText" placeholder="Search topics">

<table>
    <tr ng-repeat="ptutor in tutorial | filter : searchText">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Code คำอธิบาย:

  1. ช่องป้อนข้อมูลจะเขียนสิ่งใดก็ตามที่พิมพ์ลงไป searchText ในขอบเขตที่กำหนด
  2. filter : searchText เก็บแถวที่มีชื่อหรือ Description จะมีสตริงย่อยนั้นอยู่ โดยไม่คำนึงถึงตัวพิมพ์ใหญ่เล็ก
  3. หากต้องการค้นหาในคอลัมน์เดียว ให้ส่งอ็อบเจ็กต์เป็นพารามิเตอร์: filter : {Name : searchText}.
  4. ตัวกรองแบบอนุกรม ดังนั้น | filter : searchText | orderBy : 'Name' ทำการค้นหาก่อน แล้วจึงคัดกรองผู้รอดชีวิต

รักษาการตอบสนองของตารางขนาดใหญ่

ปัญหาหนึ่งที่พบบ่อยในการพัฒนาตารางด้วย AngularJS คือชุดข้อมูลขนาดใหญ่ที่มีจำนวนแถวตั้งแต่หนึ่งพันแถวขึ้นไป ng-ซ้ำ คำสั่งนี้สร้างขอบเขตและตัวตรวจสอบต่อแถว ทำให้หน้าเว็บอาจหยุดตอบสนองได้ ควรแบ่งแถวออกไปหลายๆ แถวแทน และเพิ่ม... track by ดังนั้นจึงมีการนำแถวที่มีอยู่แล้วมาใช้ซ้ำแทนที่จะสร้างใหม่ทั้งหมด

<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">

คำถามที่พบบ่อย

ng-repeat ต้องการคีย์ที่ไม่ซ้ำกันสำหรับทุกแถว ค่าที่เหมือนกันสองค่าจะทำให้เกิดข้อผิดพลาดเรื่องค่าซ้ำ เพิ่มคุณสมบัติที่ไม่ซ้ำกัน หรือเขียนใหม่ track โดย $index ดังนั้นตำแหน่งของแถวจะกลายเป็นคีย์แทนที่จะเป็นค่าของมัน

ใช่ ส่งอาร์เรย์ของคีย์ เช่น orderBy : ['Name','DescriptAngularJS จะเรียงลำดับตามคีย์แรกก่อน แล้วจึงใช้คีย์ที่สองเป็นตัวตัดสินหากคีย์ใดคีย์หนึ่งมีค่าเท่ากัน หากต้องการกลับลำดับเฉพาะคีย์นั้น ให้ใส่เครื่องหมายลบนำหน้าคีย์นั้น

แต่ละแถวที่ใช้ ng-repeat จะมีค่าบูลีน $even และ $odd สามารถผูกค่าใดค่าหนึ่งกับ ng-class หรือ ng-if เพื่อกำหนดสีพื้นหลัง ซึ่งจะทำให้ได้แถวที่มีลายทางโดยไม่ต้องใช้ตัวเลือก CSS เพิ่มเติมใดๆ บนตาราง

ผู้ช่วย เช่น นักบิน GitHub สร้างโครงสร้างมาร์กอัป ng-repeat ได้อย่างรวดเร็ว แต่พวกเขายังคงสร้างเส้นทางสคริปต์และสะกดแอตทริบิวต์ผิด ตรวจสอบคำแนะนำแต่ละข้อกับ เอกสารอ้างอิงตัวกรอง AngularJS ก่อนจัดส่งping.

เครื่องมือ AI จะเขียน ng-repeat ใหม่ให้เป็นบล็อกควบคุมการไหล และย้ายตัวกรองไปไว้ในไปป์หรือสัญญาณ เนื่องจาก เชิงมุม ไม่มีฟังก์ชันเรียงลำดับหรือกรองข้อมูลในตัว ต้องตรวจสอบการเรียงลำดับและการค้นหาที่สร้างขึ้นทุกครั้งด้วยตนเอง

สรุปโพสต์นี้ด้วย: