ในขั้นตอนนี้คุณจะได้เรียนรู้วิธีสร้างตัวกรองการแสดงผลของคุณเอง
โปรดรีเซ็ตไดเรกทอรีการทำงาน:
git checkout -f step -9
ตอนนี้ไปที่หน้ารายละเอียดมือถือ ในขั้นตอนก่อนหน้าหน้ารายละเอียดโทรศัพท์จะแสดง "จริง" หรือ "เท็จ" เพื่อระบุว่าโทรศัพท์มีคุณสมบัติเฉพาะหรือไม่ ตอนนี้เราใช้ตัวกรองที่กำหนดเองเพื่อกราฟสตริงข้อความเหล่านั้น: √เป็น "จริง"; และ×เป็น“ เท็จ” มาดูกันว่ารหัสตัวกรองเป็นอย่างไร
ความแตกต่างที่สำคัญที่สุดระหว่างขั้นตอนที่ 8 และขั้นตอนที่ 9 อยู่ด้านล่าง คุณสามารถเห็นความแตกต่างที่สมบูรณ์ใน GitHub
ตัวกรองที่กำหนดเอง
ในการสร้างตัวกรองใหม่ก่อนอื่นให้สร้างโมดูล PhonecatFilters และลงทะเบียนตัวกรองที่กำหนดเองด้วยโมดูลนี้
แอพ/js/filters.js
Angular.module ('PhonecatFilters', []). ตัวกรอง ('checkmark', function () {return function (อินพุต) {return input? '/u2713': '/u2718';};});ตัวกรองของเรามีชื่อว่า Checkmark อินพุตของมันเป็นจริงหรือเท็จและเราส่งคืนอักขระ Unicode สองตัว ( /U2713 และ /U2718) ที่แสดงถึงจริงหรือเท็จ
ตอนนี้ตัวกรองของเราพร้อมแล้วเราต้องลงทะเบียนโมดูล PhoneCatFilters ของเราเพื่อการพึ่งพาโมดูลหลักของเรา
แอพ/js/app/js
... angular.module ('phonecat', ['phonecatfilters']) ...เทมเพลต
เนื่องจากรหัสเทมเพลตของเราเขียนไว้ในไฟล์แอพ/js/filter.js เราจึงต้องแนะนำไฟล์นี้ในเทมเพลตเลย์เอาต์
App/index.html
... <script src = "js/controllers.js"> </script> <script src = "js/filters.js"> </script> ...
ไวยากรณ์สำหรับการใช้ตัวกรองในเทมเพลต AngularJS คือ:
{{Expression | กรอง }}
เราใช้ตัวกรองกับเทมเพลตรายละเอียดโทรศัพท์:
แอพ/partials/phone-detail.html
... <Dl> <Dt> อินฟราเรด </dt> <dd> {{phone.connectivity.infrared | Checkmark}} </dd> <dt> gps </dt> <dd> {{phone.connectivity.gps | Checkmark}} </dd> </dl> ...ทดสอบ
ควรทดสอบตัวกรองเช่นเดียวกับส่วนประกอบอื่น ๆ และการทดสอบเหล่านี้ง่ายต่อการกรอก
ทดสอบ/หน่วย/filtersspec.js
อธิบาย ('ตัวกรอง', function () {ก่อนหน้า (โมดูล ('phonecatfilters')); อธิบาย ('checkmark', function () {it ('ควรแปลงค่าบูลีนเป็น unicode congark หรือ cross', inject (ฟังก์ชั่น (checkmarkfilter) {คาดหวัง คาดหวัง (checkmarkfilter (false)). tobe ('/u2718'); -โปรดทราบว่าก่อนที่จะทำการทดสอบตัวกรองใด ๆ คุณต้องกำหนดค่าหัวฉีดทดสอบของเราสำหรับโมดูล PhoneCatFilters
ดำเนินการ ./scripts/test/sh เพื่อเรียกใช้การทดสอบและคุณควรเห็นผลลัพธ์ต่อไปนี้:
Chrome: Runner Reset ...... การทดสอบทั้งหมด 4 ครั้ง (ผ่าน: 4; Fails: 0; ข้อผิดพลาด: 0) (3.00 ms) Chrome 19.0.1084.36 Mac OS: Run 4 การทดสอบ (ผ่าน: 4; Fails: 0; ข้อผิดพลาด 0) (3.00 ms)
ตอนนี้มาฝึกตัวกรอง AngularJS ในตัวและเพิ่มการผูกต่อไปนี้ใน index.html:
นอกจากนี้เรายังสามารถใช้กล่องอินพุตเพื่อสร้างโมเดลและรวมเข้ากับการเชื่อมที่กรอง เพิ่มรหัสต่อไปนี้เป็น index.html:
<อินพุต ng-model = "userInput"> uppercased: {{userInput | ตัวพิมพ์ใหญ่}}
สรุป
ตอนนี้คุณรู้วิธีการเขียนและทดสอบปลั๊กอินที่กำหนดเองในขั้นตอนที่ 10 เราจะได้เรียนรู้วิธีดำเนินการต่อเพื่อเพิ่มรายละเอียดของโทรศัพท์มือถือของเราด้วย AngularJS
ข้างต้นเป็นการรวบรวมข้อมูลเกี่ยวกับตัวกรอง AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!