ตัวกรอง AngularJS และตัวกรองแบบกำหนดเอง AngularJS พร้อมตัวอย่าง
เจมส์ ฮาร์ทแมน
⚡ สรุปอย่างชาญฉลาด
ฟิลเตอร์ใน AngularJS ทำหน้าที่จัดรูปแบบค่าของนิพจน์เพื่อแสดงผลโดยไม่เปลี่ยนแปลงข้อมูลพื้นฐาน ฟิลเตอร์แบบสำเร็จรูปครอบคลุมตัวพิมพ์ใหญ่-เล็ก ตัวเลข สกุลเงิน และ JSON ในขณะที่ฟิลเตอร์แบบกำหนดเองจะจัดการกฎการจัดรูปแบบใดๆ ที่เฟรมเวิร์กไม่ได้จัดเตรียมไว้ให้
ตัวกรองใน AngularJS คืออะไร
A กรองใน AngularJS ช่วยในการจัดรูปแบบค่าของนิพจน์สำหรับการแสดงผลต่อผู้ใช้โดยไม่เปลี่ยนแปลงค่าเดิม ตัวอย่างเช่น หากคุณต้องการให้สตริงแสดงเป็นตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ คุณสามารถทำได้โดยใช้ตัวกรอง ตัวกรองในตัว เช่น 'lowercase' และ 'uppercase' จะส่งคืนสตริงในรูปแบบที่ต้องการ และยังมีตัวกรองเพิ่มเติมสำหรับตัวเลข สกุลเงิน และ JSON อีกด้วย
⚠️ หมายเหตุเกี่ยวกับเวอร์ชัน: AngularJS (เวอร์ชัน 1.x) สิ้นสุดการสนับสนุนเมื่อวันที่ 31 ธันวาคม 2021 และจะไม่ได้รับการแก้ไขช่องโหว่ด้านความปลอดภัยเพิ่มเติมอีกต่อไป ข้อมูลด้านล่างนี้ยังคงถูกต้องสำหรับการบำรุงรักษาแอปพลิเคชัน AngularJS ที่มีอยู่ ใน Angular เวอร์ชันใหม่ บทบาทเดียวกันนี้จะถูกแทนที่ด้วย pipe
ตัวกรองจะถูกนำไปใช้ในมุมมองที่มีอักขระไปป์ ก่อนที่จะดูแต่ละตัวกรอง ควรทำความเข้าใจก่อนว่าทำไมคุณถึงต้องเขียนตัวกรองของคุณเอง
ตัวกรองตัวพิมพ์เล็กใน AngularJS
ตัวกรองนี้รับสตริงและแสดงอักขระทั้งหมดในสตริงนั้นในรูปแบบตัวพิมพ์เล็ก
ด้านล่างนี้ ตัวควบคุมจะส่งข้อความไปยังส่วนแสดงผลผ่านทางอ็อบเจ็กต์ขอบเขต และตัวกรองจะแปลงข้อความนั้นเป็นตัวพิมพ์เล็ก
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | lowercase}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script> </body> </html>
Code คำอธิบาย
- สตริงที่มีทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก “Angular JS” จะถูกเก็บไว้ในตัวแปรสมาชิกที่ชื่อว่า
tutorialNameบนวัตถุขอบเขต - สัญลักษณ์ตัวกรอง (|) ทำเครื่องหมายเอาต์พุตสำหรับการแปลง และ
lowercaseคีย์เวิร์ดนี้ใช้ตัวกรองในตัวที่แปลงสตริงทั้งหมดเป็นตัวพิมพ์เล็ก
⚠️ มีการแก้ไขข้อมูลในทุกรายการแล้ว ตัวอย่างดั้งเดิมทั้งหกชิ้นมีข้อบกพร่องร่วมกันสามประการ chrset="UTF 8" ไม่ใช่แอตทริบิวต์หรือการเข้ารหัสที่ถูกต้อง และตอนนี้ charset="UTF-8". angular-route.js เต็ม ก่อน angular.min.jsซึ่งทำให้เกิดข้อผิดพลาดของโมดูล และไม่เคยถูกใช้งาน — จึงถูกลบออกไปแล้ว เช่นเดียวกับการอ้างอิง jQuery ที่ไม่ได้ใช้ นอกจากนี้ ข้อความยังอ้างว่าค่าคือ “AngularJS” ในขณะที่โค้ดตั้งค่าเป็น “Angular JS” ซึ่งตอนนี้ข้อความตรงกันแล้ว
Output:
สตริงที่มีตัวพิมพ์ใหญ่และตัวพิมพ์เล็กผสมกันจะถูกแสดงผลเป็นตัวพิมพ์เล็กทั้งหมด การแปลงในทางตรงกันข้ามก็ให้ผลลัพธ์เช่นเดียวกัน
ตัวกรองตัวพิมพ์ใหญ่ใน AngularJS
ตัวกรองนี้เป็นตัวกรองตรงข้ามกับตัวกรองตัวพิมพ์เล็ก โดยจะแสดงตัวอักษรทุกตัวเป็นตัวพิมพ์ใหญ่
ด้านล่างนี้ ตัวควบคุมจะส่งข้อความไปยังส่วนแสดงผลผ่านทางอ็อบเจ็กต์ขอบเขต และตัวกรองจะแปลงข้อความนั้นให้เป็นตัวพิมพ์ใหญ่
<!-- The head and library references are unchanged from the previous example --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | uppercase}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script>
Code คำอธิบาย
- สตริงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ผสม “Angular JS” ถูกวางไว้ใน
tutorialNameและแนบไปกับวัตถุขอบเขต - สัญลักษณ์ตัวกรอง (|) ตามด้วย
uppercaseคำหลักนี้ ทำให้ตัวกรองในตัวแสดงผลสตริงทั้งหมดเป็นตัวพิมพ์ใหญ่
⚠️ การแก้ไข: เดิมทีส่วนนี้ถูกนำเสนอว่าเป็น “ตัวอย่างของตัวกรองการใช้ตัวพิมพ์ใหญ่ใน AngularJS พร้อมตัวเลือกตัวพิมพ์เล็ก” ซึ่งผิดถึงสองครั้ง ส่วนนี้แสดงตัวกรองตัวพิมพ์ใหญ่ และ AngularJS ไม่มีตัวกรองการใช้ตัวพิมพ์ใหญ่เลย การทำให้เฉพาะตัวอักษรตัวแรกเป็นตัวพิมพ์ใหญ่ต้องใช้ตัวกรองแบบกำหนดเอง ซึ่งส่วนต่อๆ ไปจะแสดงวิธีการสร้าง
Output:
ตัวกรองกรณีไม่รับอาร์กิวเมนต์ใดๆ ตัวกรองถัดไปแสดงวิธีการใช้เครื่องหมายโคลอนเพื่อส่งพารามิเตอร์ไปยังตัวกรอง
ตัวกรองตัวเลขใน AngularJS
ตัวกรองนี้จะจัดรูปแบบตัวเลขและสามารถจำกัดจำนวนทศนิยมที่แสดงได้
ตัวอย่างด้านล่างใช้ตัวกรองตัวเลขเพื่อแสดงค่าที่จำกัดไว้ที่ทศนิยมสองตำแหน่ง ตัวควบคุมจะส่งตัวเลขไปยังมุมมองผ่านอ็อบเจ็กต์ขอบเขต และตัวกรองจะถูกนำไปใช้ในมุมมอง
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialID = 3.565656; }]); </script>
Code คำอธิบาย
- ตัวเลขที่มีทศนิยมหลายตำแหน่งจะถูกเก็บไว้ในตัวแปรสมาชิกที่เรียกว่า
tutorialIDและแนบไปกับวัตถุขอบเขต - สัญลักษณ์ตัวกรอง (|) ตามด้วย
number:2เครื่องหมายโคลอน (:) ใช้ส่งค่าอาร์กิวเมนต์ และเลข 2 ใช้กำหนดทศนิยมสองตำแหน่ง ค่าที่ได้จะถูกปัดเศษเพื่อการแสดงผล ดังนั้น 3.565656 จะปรากฏเป็น 3.57 ในขณะที่ขอบเขตการแสดงผลยังคงแสดงตัวเลขเต็ม
Output:
การจัดรูปแบบตัวเลขธรรมดามักไม่เพียงพอเมื่อค่าดังกล่าวเป็นค่าเงิน ซึ่งเป็นสิ่งที่ตัวกรองถัดไปจะจัดการ
ตัวกรองสกุลเงินใน AngularJS
ตัวกรองนี้จะแปลงตัวเลขให้เป็นค่าสกุลเงิน โดยใส่สัญลักษณ์สกุลเงิน เช่น $ ไว้ข้างหน้า
ในตัวอย่างด้านล่าง ตัวควบคุมจะส่งตัวเลขไปยังมุมมองผ่านอ็อบเจ็กต์ขอบเขต และตัวกรองสกุลเงินจะถูกนำไปใช้ในมุมมองนั้น
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialprice = 20.56; }]); </script>
Code คำอธิบาย
- ตัวเลขหนึ่งตัวถูกเก็บไว้ในตัวแปรสมาชิกที่ชื่อว่า
tutorialpriceและแนบไปกับวัตถุขอบเขต - สัญลักษณ์ตัวกรอง (|) ตามด้วย
currencyกรอง.
⚠️ การแก้ไข: ข้อความต้นฉบับอ้างว่าสัญลักษณ์สกุลเงิน "ขึ้นอยู่กับการตั้งค่าภาษาที่ใช้ในเครื่อง" ซึ่งไม่เป็นความจริง AngularJS ใช้ภาษาที่มาพร้อมกับไลบรารี ซึ่งโดยค่าเริ่มต้นคือ en-US ดังนั้นสัญลักษณ์จึงเป็น $ ไม่ว่าระบบปฏิบัติการจะเป็นอะไรก็ตาม โหลดไฟล์ที่ตรงกัน angular-locale_*.js ไฟล์ หรือส่งสัญลักษณ์โดยตรง: {{tutorialprice | currency:"£"}}.
Output:
สตริงและตัวเลขเป็นค่าแบบง่าย ตัวกรองในตัวตัวสุดท้ายจะจัดการกับออบเจ็กต์ทั้งหมด
ตัวกรอง JSON ใน AngularJS
ตัวกรองนี้จะแปลงวัตถุให้เป็นรูปแบบที่กำหนดไว้ JSON สตริง ซึ่งมีประโยชน์สำหรับการตรวจสอบข้อมูลขอบเขตในระหว่างการพัฒนา
ในตัวอย่างด้านล่าง ตัวควบคุมจะส่งอ็อบเจ็กต์ไปยังมุมมองผ่านทางอ็อบเจ็กต์ขอบเขต และตัวกรอง JSON จะถูกนำไปใช้ในมุมมอง
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" }; }]); </script>
Code คำอธิบาย
- วัตถุที่ถือ
TutorialID: 12และtutorialName: "Angular"ถูกเก็บไว้ในตัวแปรสมาชิกที่เรียกว่าtutorialและแนบไปกับวัตถุขอบเขต - สัญลักษณ์ตัวกรอง (|) ตามด้วย
jsonตัวกรองที่แปลงอ็อบเจ็กต์เป็นข้อความ JSON ที่มีการเยื้องย่อหน้า
⚠️ การแก้ไข: เดิมทีระบุค่านี้ว่าเป็น "ตัวเลข" และเป็น "สตริงประเภท JSON" แต่มันไม่ใช่ทั้งสองอย่าง มันคือ... Javaอ็อบเจ็กต์สคริปต์ และตัวกรอง JSON จะแปลงอ็อบเจ็กต์นั้นให้เป็นสตริง JSON เพื่อแสดงผล
Output:
ตัวกรองทั้งห้าตัวนี้ครอบคลุมกรณีทั่วไปแล้ว หากไม่มีตัวใดให้ผลลัพธ์ที่คุณต้องการ คุณก็ต้องเขียนตัวกรองของคุณเอง
ตัวกรองแบบกำหนดเอง AngularJS
บางครั้งฟิลเตอร์สำเร็จรูปใน AngularJS อาจไม่ตรงตามความต้องการในการจัดรูปแบบผลลัพธ์ ในกรณีเช่นนี้ สามารถสร้างฟิลเตอร์แบบกำหนดเองใน AngularJS เพื่อส่งคืนผลลัพธ์ในรูปแบบที่ต้องการได้
ตัวกรองแบบกำหนดเองจะถูกลงทะเบียนในโมดูล จากนั้นจะทำงานเหมือนกับตัวกรองมาตรฐานทุกประการ ส่วนด้านล่างจะกล่าวถึงตัวกรองมาตรฐานก่อน เนื่องจากตัวกรองแบบกำหนดเองใช้ไวยากรณ์ของไปป์แบบเดียวกัน จากนั้นจึงแสดงวิธีการสร้างตัวกรองแบบกำหนดเอง
วิธีสร้างตัวกรองแบบกำหนดเองใน AngularJS
ในตัวอย่างด้านล่าง สตริงจะถูกส่งผ่านจาก ตัวควบคุม ไปยังมุมมองผ่านออบเจ็กต์ขอบเขต แต่ไม่ควรแสดงผลตามนั้น ตัวกรองแบบกำหนดเองใน AngularJS เพิ่มข้อความอีกชุดหนึ่งและแสดงผลลัพธ์ที่เสร็จสมบูรณ์
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script> var app = angular.module('DemoApp', []); // The factory runs once; the function it returns runs on every value app.filter('Demofilter', function() { return function(input) { return input + " Tutorial"; }; }); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = "Angular"; }]); </script>
Code คำอธิบาย
- สตริง “Angular” ถูกเก็บไว้ในตัวแปรสมาชิกที่ชื่อว่า
tutorialและแนบไปกับวัตถุขอบเขต - AngularJS มีคุณสมบัติดังนี้
filterวิธีการลงทะเบียนที่ใช้ในการสร้างตัวกรองแบบกำหนดเอง ชื่อที่ตั้งให้กับตัวกรองนี้คือ 'Demofilter' และชื่อนี้คือชื่อที่หน้าจอแสดงผลอ้างอิงถึง - นี่คือรูปแบบมาตรฐานของตัวกรองแบบกำหนดเอง: ฟังก์ชันที่ลงทะเบียนไว้คือ โรงงาน โดยจะส่งคืนฟังก์ชันที่ทำหน้าที่นั้น ฟังก์ชันดังกล่าวจะรับค่าที่ต้องการกรองเป็นพารามิเตอร์ตัวแรก และส่งคืนผลลัพธ์ ซึ่งในที่นี้คือค่าที่ป้อนเข้าไปพร้อมกับคำว่า "Tutorial" ที่ต่อท้าย
- ตัวกรองจะถูกนำไปใช้ในมุมมองโดยใช้ไวยากรณ์ของท่อแบบเดียวกับตัวกรองในตัวอื่นๆ
💡 เคล็ดลับ: โดยทั่วไปแล้ว ชื่อฟิลเตอร์จะใช้ตัวพิมพ์เล็กหรือ camelCase เช่น 'Demofilter' ก็ใช้ได้ แต่ชื่ออย่างเช่น 'Demofilter' อาจไม่เหมาะสมนัก appendTutorial อ่านง่ายกว่าและหลีกเลี่ยงการซ้ำซ้อนกับชื่อที่มีอยู่แล้ว
Output:
คำว่า 'Tutorial' ถูกเพิ่มต่อท้ายสตริงที่ส่งเข้ามา tutorial ตัวแปร ตัวกรองนี้จะเพิ่มข้อความเดิมซ้ำๆ เสมอ ซึ่งในส่วนถัดไปจะทำให้สามารถกำหนดค่าได้
วิธีการส่งอาร์กิวเมนต์ไปยังตัวกรองแบบกำหนดเอง
ตัวกรองด้านบนกำหนดข้อความที่จะเพิ่มเข้าไปแบบตายตัว ดังนั้นจึงทำได้เพียงอย่างเดียว ตัวกรองในตัวเช่น number:2 ยอมรับอาร์กิวเมนต์หลังเครื่องหมายโคลอน และตัวกรองแบบกำหนดเองก็ทำได้เช่นกัน: พารามิเตอร์ทุกตัวหลังตัวแรกจะถูกแมปไปยังอาร์กิวเมนต์ที่คั่นด้วยเครื่องหมายโคลอนในมุมมอง
มีสามขั้นตอนดังนี้: เพิ่มพารามิเตอร์หลังจากนั้น input ในฟังก์ชันที่ส่งคืน ให้ระบุค่าเริ่มต้นสำหรับสิ่งที่เป็นตัวเลือก เพื่อให้ตัวกรองยังคงทำงานได้แม้ว่าจะละเว้นอาร์กิวเมนต์ จากนั้นส่งอาร์กิวเมนต์ในวิวโดยคั่นด้วยเครื่องหมายโคลอน
app.filter('appendText', function() { return function(input, suffix, separator) { if (!input) { return input; } // guard against undefined separator = typeof separator === 'undefined' ? ' ' : separator; return input + separator + suffix; }; });
จากนั้นหน้าจอแสดงผลจะเป็นดังนี้ โดยที่ “บทเรียน” จะกลายเป็น suffix และเครื่องหมายยัติภังค์กลายเป็น separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
มีรายละเอียดสองอย่างที่อาจมองข้ามได้ง่าย อาร์กิวเมนต์เป็นนิพจน์ของ AngularJS ดังนั้นสตริงตัวอักษรจะต้องอยู่ในเครื่องหมายคำพูด ในขณะที่คำที่ไม่อยู่ในเครื่องหมายคำพูดจะถูกอ่านเป็นคุณสมบัติของขอบเขต นอกจากนี้ ฟิลเตอร์ยังทำงานแบบต่อเนื่อง โดยแต่ละฟิลเตอร์จะรับเอาผลลัพธ์จากฟิลเตอร์ก่อนหน้า: {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ คำเตือน: รักษาตัวกรองให้บริสุทธิ์ — ให้ผลลัพธ์เหมือนเดิมสำหรับอินพุตเดิม โดยไม่มีการเปลี่ยนแปลงจากภายนอก AngularJS จะแคชตัวกรองที่บริสุทธิ์และเรียกใช้งานอีกครั้งก็ต่อเมื่ออินพุตเปลี่ยนแปลงเท่านั้น ตัวกรองที่อ่านเวลาหรือเปลี่ยนแปลงบริการจะต้องถูกทำเครื่องหมายไว้ $statefulซึ่งจะปิดใช้งานการแคชและเรียกใช้ตัวกรองในทุกรอบการประมวลผล ซึ่งเป็นสาเหตุทั่วไปที่ทำให้หน้าเว็บโหลดช้า
ตัวกรองไม่ได้จำกัดอยู่เฉพาะในเทมเพลตเท่านั้น สามารถเรียกใช้ตัวกรองเดียวกันได้จากหลายแหล่ง Javaสคริปต์แสดงดังต่อไปนี้
วิธีใช้งานฟิลเตอร์ในคอนโทรลเลอร์ด้วยบริการ $filter
การใช้ฟิลเตอร์ในมุมมอง (view) เป็นกรณีทั่วไป แต่บางครั้งค่าที่แปลงแล้วอาจจำเป็นต้องใช้ภายในคอนโทรลเลอร์ (controller) เช่น ก่อนส่งข้อมูลไปยังเซิร์ฟเวอร์ AngularJS เปิดเผยฟิลเตอร์ที่ลงทะเบียนไว้ทั้งหมด ทั้งฟิลเตอร์ในตัวและฟิลเตอร์ที่กำหนดเอง ผ่านทาง $filter เรียกใช้บริการโดยการฉีดเข้าไป จากนั้นเรียกใช้ด้วยชื่อตัวกรองเพื่อดึงฟังก์ชันตัวกรอง แล้วเรียกใช้ฟังก์ชันนั้นด้วยค่าและอาร์กิวเมนต์ใดๆ
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.tutorial = "Angular"; // Built-in filters, called from JavaScript $scope.shouted = $filter('uppercase')($scope.tutorial); // "ANGULAR" $scope.price = $filter('currency')(20.56); // "$20.56" // A custom filter works exactly the same way $scope.full = $filter('appendText')($scope.tutorial, "Tutorial"); }]);
นอกจากนี้ยังมีรูปแบบที่สั้นกว่าด้วย นั่นคือการแทรกชื่อตัวกรองตามด้วย Filterเช่น uppercaseFilterโดยจะให้ฟังก์ชันการกรองโดยตรงและสามารถเรียกใช้งานได้ทันที ทั้งสองรูปแบบให้ผลลัพธ์เป็นฟังก์ชันเดียวกัน ดังนั้นการเลือกใช้จึงขึ้นอยู่กับสไตล์การใช้งาน
มีการใช้งานสองอย่างที่พบเจอซ้ำๆ อย่างแรกคือการเตรียมข้อมูลที่จะส่งไปยัง API: โดยปกติแล้วข้อมูลจะต้องถูกส่งไปยัง API ในรูปแบบที่กำหนดไว้ และ $filter('date')(value, 'yyyy-MM-dd') วิธีแรกคือการกรองข้อมูลโดยไม่แตะต้องค่าที่ผูกกับฟอร์ม วิธีที่สองคือการจำกัดขอบเขตของคอลเลกชันเพียงครั้งเดียวในคอนโทรลเลอร์ แทนที่จะปล่อยทิ้งไว้ orderBy ใน ng-ซ้ำ นิพจน์ที่แสดงการทำงานซ้ำในทุกรอบการวิเคราะห์
ฟิลเตอร์ที่ถูกแทรกด้วยวิธีนี้จะยังคงถูกลงทะเบียนในโมดูล ดังนั้นฟิลเตอร์แบบกำหนดเองจะต้องถูกประกาศด้วย app.filter ก่อนที่ตัวควบคุมใดๆ จะถาม $filter สำหรับกรณีนี้ มิเช่นนั้น AngularJS จะแสดงข้อผิดพลาดว่าผู้ให้บริการไม่รู้จัก
การเรียกใช้ฟิลเตอร์ใน Javaสคริปต์แตกต่างจากเทมเพลตในประเด็นสำคัญประการหนึ่ง คือ ผลลัพธ์จะถูกคำนวณเพียงครั้งเดียวและจัดเก็บไว้ในขอบเขต แทนที่จะคำนวณใหม่ทุกครั้งที่มีการสร้างไดเจสต์ ทำให้เป็นตัวเลือกที่เร็วกว่าสำหรับค่าที่เปลี่ยนแปลงไม่บ่อยนัก และเป็นตัวเลือกที่ไม่เหมาะสมสำหรับค่าที่ต้องเปลี่ยนแปลงบ่อยครั้ง track ข้อมูลที่ผู้ใช้ป้อน
