ตัวกรอง AngularJS และตัวกรองแบบกำหนดเอง AngularJS พร้อมตัวอย่าง
ตัวกรองใน AngularJS คืออะไร
A กรองใน AngularJS ช่วยจัดรูปแบบค่าของนิพจน์เพื่อแสดงให้ผู้ใช้เห็นโดยไม่ต้องเปลี่ยนรูปแบบเดิม ตัวอย่างเช่น หากคุณต้องการให้สตริงเป็นตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ คุณสามารถทำได้โดยใช้ตัวกรอง มีตัวกรองในตัว เช่น 'ตัวพิมพ์เล็ก', 'ตัวพิมพ์ใหญ่' ซึ่งสามารถดึงข้อมูลเอาต์พุตตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ตามลำดับ
ตัวกรองแบบกำหนดเอง AngularJS
บางครั้งตัวกรองในตัวใน Angular ไม่สามารถตอบสนองความต้องการหรือข้อกำหนดสำหรับการกรองเอาต์พุต ในกรณีเช่นนี้ คุณสามารถสร้างตัวกรองที่กำหนดเองของ AngularJS ซึ่งสามารถส่งผ่านเอาต์พุตในลักษณะที่ต้องการได้
ในทำนองเดียวกัน คุณสามารถใช้ตัวกรองอื่นสำหรับตัวเลขได้ ในบทช่วยสอนนี้ เราจะดูตัวกรองมาตรฐานต่างๆ ที่มีอยู่ใน Angular
วิธีสร้างตัวกรองแบบกำหนดเองใน AngularJS
ในตัวอย่างตัวกรองแบบกำหนดเองของ AngularJS ด้านล่าง เราจะส่งสตริงไปยังมุมมองจากตัวควบคุมผ่านวัตถุขอบเขต แต่เราไม่ต้องการให้สตริงแสดงตามที่เป็นอยู่
เราต้องการให้แน่ใจว่าเมื่อใดก็ตามที่เราแสดงสตริง เราจะส่งตัวกรองที่กำหนดเองเข้าไป AngularJSซึ่งจะต่อท้ายสตริงอื่นและแสดงสตริงที่เสร็จสมบูรณ์แก่ผู้ใช้
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <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.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.filter('Demofilter',function(){ return function(input) { return input + " Tutorial" } }); app.controller('DemoController',function($scope){ $scope.tutorial ="Angular"; }); </script> </body> </html>
คำอธิบายรหัส
- ที่นี่เรากำลังส่งสตริง "Angular" ในตัวแปรสมาชิกที่เรียกว่าบทช่วยสอนและแนบมันเข้ากับวัตถุขอบเขต
- Angular ให้บริการตัวกรองซึ่งสามารถใช้เพื่อสร้างตัวกรองที่กำหนดเองของเรา 'Demofilter' คือชื่อที่ตั้งให้กับตัวกรองของเรา
- นี่เป็นวิธีมาตรฐานในการกำหนดตัวกรองแบบกำหนดเองใน AngularJS โดยที่ฟังก์ชันจะถูกส่งกลับ ฟังก์ชันนี้คือสิ่งที่มีโค้ดแบบกำหนดเองเพื่อสร้างตัวกรองแบบกำหนดเอง ในฟังก์ชันของเรา เรากำลังนำสตริง “Angular” ซึ่งถูกส่งผ่านจากมุมมองของเราไปยังตัวกรอง และเพิ่มสตริง “Tutorial” ต่อท้ายสิ่งนี้
- เรากำลังใช้ Demofilter กับตัวแปรสมาชิกของเราซึ่งส่งผ่านจากคอนโทรลเลอร์ไปยังมุมมอง
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
Output:
จากผลลัพธ์ที่ได้
- จะเห็นได้ว่ามีการใช้ตัวกรองแบบกำหนดเองของเราแล้วและ
- คำว่า 'บทช่วยสอน' ถูกต่อท้ายที่ท้ายสตริง ซึ่งถูกส่งผ่านในบทช่วยสอนตัวแปรสมาชิก
ตัวกรองตัวพิมพ์เล็กใน AngularJS
ตัวกรองนี้ใช้เอาต์พุตสตริงและจัดรูปแบบสตริงและแสดงอักขระทั้งหมดในสตริงเป็นตัวพิมพ์เล็ก
ลองดูตัวอย่างตัวกรอง AngularJS ที่มีตัวเลือก AngularJS เป็นตัวพิมพ์เล็ก
ในตัวอย่างด้านล่าง เราจะใช้ตัวควบคุมเพื่อส่งสตริงไปยังมุมมองผ่านวัตถุขอบเขต จากนั้นเราจะใช้ตัวกรองในมุมมองเพื่อแปลงสตริงเป็นตัวพิมพ์เล็ก
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <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.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> <br> This tutorial is {{tutorialName | lowercase}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope){ $scope.tutorialName ="Angular JS"; }); </script> </body> </html>
คำอธิบายรหัส
- ที่นี่เรากำลังส่งสตริงซึ่งเป็นการรวมกันของอักขระตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ในตัวแปรสมาชิกที่เรียกว่า "tutorialName" และแนบไปกับวัตถุขอบเขต ค่าของสตริงที่ถูกส่งคือ “AngularJS”
- เรากำลังใช้ตัวแปรสมาชิก “tutorialName” และใส่สัญลักษณ์ตัวกรอง (|) ซึ่งหมายความว่าจำเป็นต้องแก้ไขเอาต์พุตโดยใช้ตัวกรอง จากนั้นเราใช้คีย์เวิร์ดตัวพิมพ์เล็กเพื่อบอกว่าให้ใช้ตัวกรองในตัวเพื่อส่งออกสตริงทั้งหมดเป็นตัวพิมพ์เล็ก
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
Output:
จากเอาท์พุต
- จะเห็นได้ว่าสตริง “AngularJS” ซึ่งถูกส่งผ่านในตัวแปร TutorialName ซึ่งเป็นการผสมผสานระหว่างอักขระตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ได้ถูกดำเนินการแล้ว
- หลังจากดำเนินการแล้ว ผลลัพธ์สุดท้ายจะเป็นตัวพิมพ์เล็กดังที่แสดงไว้ด้านบน
ตัวกรองตัวพิมพ์ใหญ่ใน AngularJS
ตัวกรองนี้คล้ายกับตัวกรองตัวพิมพ์เล็ก ข้อแตกต่างคือใช้กับเอาต์พุตสตริงและจัดรูปแบบสตริงและแสดงอักขระทั้งหมดในสตริงเป็นตัวพิมพ์ใหญ่
ลองดูตัวอย่างของการใช้ตัวพิมพ์ใหญ่ตัวกรอง AngularJS ด้วยตัวเลือกตัวพิมพ์เล็ก
ในตัวอย่างการใช้ตัวพิมพ์ใหญ่ของ AngularJS ด้านล่าง เราจะใช้ตัวควบคุมเพื่อส่งสตริงไปยังมุมมองผ่านวัตถุขอบเขต จากนั้นเราจะใช้ตัวกรองในมุมมองเพื่อแปลงสตริงเป็นตัวพิมพ์ใหญ่
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <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.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> <br> This tutorial is {{tutorialName | uppercase}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope){ $scope.tutorialName ="Angular JS"; }); </script> </body> </html>
คำอธิบายรหัส
- ที่นี่เรากำลังส่งสตริงซึ่งเป็นการรวมกันของอักขระตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ “Angular JS” ในตัวแปรสมาชิกที่เรียกว่า “tutorialName” และแนบไปกับวัตถุขอบเขต
- เรากำลังใช้ตัวแปรสมาชิก “tutorialName” และใส่สัญลักษณ์ตัวกรอง (|) ซึ่งหมายความว่าจำเป็นต้องแก้ไขเอาต์พุตโดยใช้ตัวกรอง จากนั้นเราใช้คีย์เวิร์ดตัวพิมพ์ใหญ่เพื่อบอกว่าใช้ตัวกรองในตัวเพื่อส่งออกสตริงทั้งหมดเป็นตัวพิมพ์ใหญ่
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
Output:
จากผลลัพธ์ที่ได้
- จะเห็นได้ว่าสตริงที่ถูกส่งผ่านในตัวแปร TutorialName ซึ่งเป็นการรวมกันของอักขระตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ได้ถูกส่งออกเป็นตัวพิมพ์ใหญ่ทั้งหมด
ตัวกรองตัวเลขใน AngularJS
ตัวกรองนี้จะจัดรูปแบบตัวเลขและสามารถใช้ขีดจำกัดจุดทศนิยมสำหรับตัวเลขได้
ลองดูตัวอย่างตัวกรอง AngularJS ที่มีตัวเลือกตัวเลข
ในตัวอย่างด้านล่าง
เราต้องการแสดงให้เห็นว่าเราสามารถใช้ตัวกรองตัวเลขเพื่อจัดรูปแบบตัวเลขที่จะแสดงโดยจำกัดทศนิยม 2 ตำแหน่งได้อย่างไร
เราจะใช้ตัวควบคุมเพื่อส่งตัวเลขไปยังมุมมองผ่านวัตถุขอบเขต จากนั้นเราจะใช้ตัวกรองในมุมมองเพื่อใช้ตัวกรองตัวเลข
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <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.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope){ $scope.tutorialID =3.565656; }); </script> </body> </html>
คำอธิบายรหัส
- ที่นี่เรากำลังส่งตัวเลขที่มีตำแหน่งทศนิยมมากกว่าในตัวแปรสมาชิกที่เรียกว่า TutorialID และแนบไปกับวัตถุขอบเขต
- เรากำลังใช้ TutorialID ตัวแปรสมาชิกและใส่สัญลักษณ์ตัวกรอง (|) พร้อมกับตัวกรองตัวเลข ขณะนี้อยู่ในตัวเลข:2 ทั้งสองบ่งชี้ว่าตัวกรองควรจำกัดจำนวนตำแหน่งทศนิยมไว้ที่ 2
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
Output:
จากผลลัพธ์ที่ได้
- จะเห็นได้ว่าตัวเลขที่ส่งผ่านในตัวแปร TutorialID ซึ่งมีจุดทศนิยมจำนวนมากถูกจำกัดไว้ที่ทศนิยม 2 ตำแหน่ง เนื่องจากตัวเลข: 2 ตัวกรองที่ใช้
ตัวกรองสกุลเงินใน AngularJS
ตัวกรองนี้จัดรูปแบบตัวกรองสกุลเงินเป็นตัวเลข
สมมติว่าหากคุณต้องการแสดงตัวเลขด้วยสกุลเงินเช่น $ คุณก็สามารถใช้ตัวกรองนี้ได้
ในตัวอย่างด้านล่าง เราจะใช้ตัวควบคุมเพื่อส่งตัวเลขไปยังมุมมองผ่านวัตถุขอบเขต จากนั้นเราจะใช้ตัวกรองในมุมมองเพื่อใช้ตัวกรองปัจจุบัน
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <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.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope){ $scope.tutorialprice =20.56; }); </script> </body> </html>
คำอธิบายรหัส
- ที่นี่เรากำลังส่งตัวเลขในตัวแปรสมาชิกที่เรียกว่า Tutorialprice และแนบไปกับวัตถุขอบเขต
- เรากำลังใช้ราคาการสอนตัวแปรสมาชิกและใส่สัญลักษณ์ตัวกรอง (|) พร้อมกับตัวกรองสกุลเงิน โปรดทราบว่าสกุลเงินที่ใช้นั้นขึ้นอยู่กับการตั้งค่าภาษาที่ใช้กับเครื่อง
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
Output:
จากเอาท์พุต
- จะเห็นได้ว่ามีการเพิ่มสัญลักษณ์สกุลเงินเข้ากับตัวเลขที่ถูกส่งผ่านในตัวแปรราคาการสอน
- ในกรณีของเรา เนื่องจากการตั้งค่าภาษาเป็นภาษาอังกฤษ (สหรัฐอเมริกา) จึงใส่สัญลักษณ์ $ เป็นสกุลเงิน
ตัวกรอง JSON ใน AngularJS
ตัวกรองนี้จัดรูปแบบก JSON เช่นอินพุตและใช้ตัวกรอง AngularJS JSON เพื่อให้เอาต์พุตใน JSON
ในตัวอย่างด้านล่าง เราจะใช้ตัวควบคุมเพื่อส่งออบเจ็กต์ประเภท JSON ไปยังมุมมองผ่านออบเจ็กต์ขอบเขต จากนั้นเราจะใช้ตัวกรองในมุมมองเพื่อใช้ตัวกรอง JSON
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <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.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope){ $scope.tutorial ={TutorialID:12,tutorialName:"Angular"}; }); </script> </body> </html>
คำอธิบายรหัส
- ที่นี่เรากำลังส่งตัวเลขในตัวแปรสมาชิกที่เรียกว่า "บทช่วยสอน" และแนบไปกับวัตถุขอบเขต ตัวแปรสมาชิกนี้มีสตริงประเภท JSON ของ Tutorial ID:12 และ TutorialName:”Angular”
- เรากำลังใช้บทช่วยสอนตัวแปรสมาชิกและใส่สัญลักษณ์ตัวกรอง (|) พร้อมกับตัวกรอง JSON
หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์
Output:
จากผลลัพธ์ที่ได้
- จะเห็นได้ว่า JSON เหมือนกับสตริง จะถูกแยกวิเคราะห์และแสดงเป็นวัตถุ JSON ที่เหมาะสมในเบราว์เซอร์
สรุป
- ตัวกรองใช้เพื่อเปลี่ยนวิธีแสดงเอาท์พุตให้ผู้ใช้เห็น
- Angular มีตัวกรองในตัว เช่น ตัวกรองตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ เพื่อเปลี่ยนเอาต์พุตของสตริงเป็นตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ตามลำดับ
- นอกจากนี้ ยังมีการจัดเตรียมสำหรับการเปลี่ยนแปลงวิธีแสดงตัวเลขโดยใช้ตัวกรองตัวเลข โดยระบุจำนวนจุดทศนิยมที่ต้องการแสดงในตัวเลข
- ท่านสามารถใช้ตัวกรองสกุลเงินเพื่อผนวกสัญลักษณ์สกุลเงินเข้ากับตัวเลขใดๆ ก็ได้
- หากมีข้อกำหนดที่จะต้องมีเอาต์พุตเฉพาะของ JSON เชิงมุมยังมีตัวกรอง JSON สำหรับการกรอง JSON เช่นสตริงเป็นรูปแบบ JSON
- หากมีข้อกำหนดที่ไม่ตรงตามตัวกรองใดๆ ที่กำหนดไว้ในเชิงมุม คุณสามารถสร้างตัวกรองแบบกำหนดเองและเพิ่มโค้ดแบบกำหนดเองเพื่อกำหนดประเภทของเอาต์พุตที่คุณต้องการจากตัวกรองได้