คุณสมบัติอีกอย่างของ AngularJS คือให้ตัวกรองที่สามารถใช้งานผลลัพธ์โดยใช้งานท่อภายใต้ UNIX
ด้วยการใช้ท่อส่งการแสดงมุมมองในการเชื่อมข้อมูลสองทางสามารถอำนวยความสะดวกได้
ในระหว่างการประมวลผลตัวกรองจะเปลี่ยนข้อมูลเป็นรูปแบบใหม่และสามารถใช้รูปแบบโซ่ของท่อและยอมรับพารามิเตอร์เพิ่มเติม
วิธีการดำเนินการ
ลองมาดูวิธีการกำหนดและประกาศตัวกรอง ก่อนอื่นเรายังต้องสร้างโมดูลของเราเอง MyAppModule
var myAppModule = agular.module ("myApp", []);
ถัดไปขึ้นอยู่กับโมดูลสร้างตัวกรอง:
MyAppModule.filter ("ย้อนกลับ", function () {
-
ในกรณีที่ย้อนกลับเป็นชื่อของตัวกรองตามด้วยการประกาศวิธีการของตัวกรองและวิธีการอื่นจะถูกส่งกลับในวิธีการ:
MyAppModule.filter ("Reverse", function () {return function (อินพุต, ตัวพิมพ์ใหญ่) {var out = ""; สำหรับ (var i = 0; i <input.length; i ++) {out = input.charat (i)+out;} ถ้า (uppercase) {out = out.touppercaseวิธีที่ส่งคืนภายในมีพารามิเตอร์สองตัวหนึ่งตัวคือค่าอินพุตซึ่งเป็นค่าที่ยอมรับโดยตัวกรองของเรา
หากคุณต้องการใช้ตัวกรองต่อไปนี้:
ชื่อ | ย้อนกลับ
จากนั้นอินพุตคือค่าที่แสดงตามชื่อ
พารามิเตอร์ต่อไปนี้เป็นทางเลือก เราที่นี่ยอมรับค่าบูลของตัวพิมพ์ใหญ่และพิจารณาว่าจะทำการแปลงเคสหรือไม่
ไม่จำเป็นต้องอธิบายรหัสภายใน ในที่สุดส่งคืนสตริงที่ผ่านการกรอง
ตัวอย่างโปรแกรม
<! doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <สคริปต์ src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <div ng-controller = "myAppCtrl"> ชื่อ: {{name} reverse}} <br> reverse & uppercase ชื่อ: {{name | Reverse: True}} </div> <script type = "text/javascript"> var myappmodule = angular.module ("myapp", []); MyAppModule.Controller ("MyAppCtrl", ["$ scope", ฟังก์ชั่น ($ scope) {$ scope.name = "Xingoo";}]); MyAppModule.filter ("Reverse", function () {return function (อินพุต, ตัวพิมพ์ใหญ่) {var out = ""; สำหรับ (var i = 0; i <input.length; i ++) {out = input.charat (i)+out;} ถ้า (uppercase) {out = out.touppercase </script> </body> </html>การรันผลลัพธ์
ข้างต้นคือการรวบรวมข้อมูลเกี่ยวกับตัวกรองที่กำหนดเอง AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!