ตัวกรองใช้เพื่อเปลี่ยนข้อมูลที่แก้ไขและสามารถจำแนกได้ในนิพจน์หรือใช้คำสั่งอักขระท่อ ด้านล่างเป็นรายการของตัวกรองที่ใช้กันทั่วไป
| S.No. | ชื่อ | อธิบาย |
|---|---|---|
| 1 | เมืองหลวง | แปลงข้อความเป็นข้อความตัวพิมพ์ใหญ่ |
| 2 | ตัวพิมพ์เล็ก | แปลงข้อความเป็นข้อความตัวพิมพ์เล็ก |
| 3 | สกุลเงิน | ข้อความรูปแบบสกุลเงิน |
| 4 | กรอง | กรองอาร์เรย์ของชุดย่อยมันขึ้นอยู่กับเกณฑ์ที่ให้ไว้ |
| 5 | เรียงลำดับ | เรียงลำดับจัดเตรียมอาร์เรย์พื้นฐานมาตรฐาน |
ตัวกรองแคป
เพิ่มตัวกรองตัวพิมพ์ใหญ่เพื่อใช้การแสดงออกของอักขระท่อ ที่นี่มีการเพิ่มตัวกรองทุนและชื่อของนักเรียนจะถูกพิมพ์ในตัวอักษรตัวใหญ่
ป้อนชื่อแรก: <อินพุต type = "text" ng-model = "student.firstName"> ป้อนชื่อสุดท้าย: <อินพุต type = "text" ng-model = "student.lastname"> ชื่อในกรณีบน: {{student.fullname () | ตัวพิมพ์ใหญ่}}ตัวกรองตัวพิมพ์เล็ก
เพิ่มตัวกรองตัวพิมพ์เล็กโดยใช้การแสดงออกของอักขระท่อ เพิ่มตัวกรองตัวพิมพ์เล็กที่นี่เพื่อพิมพ์ชื่อนักเรียนในตัวอักษรตัวพิมพ์เล็ก
ป้อนชื่อแรก: <อินพุต type = "text" ng-model = "student.firstName"> ป้อนชื่อสุดท้าย: <อินพุต type = "text" ng-model = "student.lastname"> ชื่อในกรณีบน: {{student.fullname () | ตัวพิมพ์เล็ก}}ตัวกรองสกุลเงิน
ตัวกรองดอลลาร์แคนาดาใช้อักขระท่อเพื่อส่งคืนการแสดงออกของจำนวน ที่นี่เราได้เพิ่มตัวกรองลงในค่าธรรมเนียมการพิมพ์ของสกุลเงินโดยใช้รูปแบบสกุลเงิน
ป้อนค่าธรรมเนียม: <อินพุตประเภท = "ข้อความ" ng-model = "student.fees"> ค่าธรรมเนียม: {{student.fees | สกุลเงิน}}ตัวกรองสำหรับตัวกรอง
ในการแสดงเฉพาะหัวข้อที่ต้องการเราใช้ชื่อเรื่องเป็นตัวกรอง
ป้อนหัวเรื่อง: <อินพุต type = "text" ng-model = "subjectName"> หัวเรื่อง: <ul> <li ng-repeat = "หัวเรื่องในนักเรียน. subjects | ตัวกรอง: subjectName"> {{subject.name + ', เครื่องหมาย:' + subject.marks}} </li> </ul>เรียงลำดับตัวกรอง
ในการเรียงลำดับหัวข้อด้วยแท็กเราใช้แท็ก orderby
หัวเรื่อง: <ul> <li ng-repeat = "หัวเรื่องใน student.subjects | orderby: 'mark'"> {{subject.name + ', เครื่องหมาย:' + subject.marks}} </li></ul>ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงตัวกรองทั้งหมดที่กล่าวถึงข้างต้น
testangularjs.html
<html> <head> <title> ตัวกรอง angular js </title> </head> <body> <h2> แอปพลิเคชันตัวอย่าง AngularJs </h2> <div ng-app = "" ng-controller = "textcontroller"> <table> <tr> <td> ป้อนชื่อ ng-model = "student.firstname"> </td> </tr> <tr> <td> ป้อนชื่อสุดท้าย: </td> <td> <อินพุต type = "text" ng-model = "student.lastname"> </td> </tr> <td> ng-model = "student.fees"> </td> </tr> <tr> <td> ป้อนหัวเรื่อง: </td> <td> <อินพุต type = "ข้อความ" ng-model = "ชื่อเรื่อง"> </td> </tr> </tr> </tr> <td> <td> uppercase}} </td> </tr> <tr> <td> ชื่อในกรณีล่าง: </td> <td> {{student.fullname () | ตัวพิมพ์เล็ก}} </td> </tr> <tr> <td> ค่าธรรมเนียม: </td> <td> {{student.fees | สกุลเงิน}} </td> </tr> <tr> <td> หัวเรื่อง: </td> <td> <ul> <li ng-repeat = "หัวเรื่องในนักเรียน. subjects | ตัวกรอง: subjectName | orderby: </li></ul> </td> </tr> </table> </div> <script> function studentcontroller ($ scope) {$ scope.student = {firstName: "mahesh", นามสกุล: "parashar", ค่าธรรมเนียม: 500, หัวเรื่อง: [{ชื่อ: {ชื่อ: 'คณิตศาสตร์', เครื่องหมาย: 65}], fullName: function () {var studentObject; studentObject = $ scope.student; ส่งคืน StudentObject.firstName + "" + studentObject.lastName; }};} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>เอาท์พุท
เปิด textangularjs.html ในเว็บเบราว์เซอร์และดูผลลัพธ์ต่อไปนี้:
ข้างต้นคือข้อมูลที่แยกตัวกรอง AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!