บทแนะนำบทแนะนำ: คำอธิบายรายละเอียดสองทางที่มีผลผูกพันสองทาง

ในขั้นตอนนี้คุณจะเพิ่มคุณสมบัติที่ช่วยให้ผู้ใช้สามารถควบคุมคำสั่งซื้อที่แสดงรายการโทรศัพท์ การเรียงลำดับแบบไดนามิกสามารถนำไปใช้ด้วยวิธีนี้เพิ่มคุณสมบัติโมเดลใหม่รวมเข้ากับตัววนซ้ำแล้วอนุญาตให้ข้อมูลมีผลผูกพันที่จะทำส่วนที่เหลือ

โปรดรีเซ็ตไดเรกทอรีการทำงาน:

git checkout -f step -4

คุณควรพบว่านอกเหนือจากช่องค้นหาแอปของคุณมีเมนูเพิ่มเติมที่อนุญาตให้ควบคุมลำดับการจัดเรียงโทรศัพท์

ความแตกต่างที่สำคัญที่สุดระหว่างขั้นตอนที่ 3 และขั้นตอนที่ 4 แสดงอยู่ด้านล่าง คุณสามารถเห็นความแตกต่างที่สมบูรณ์ใน GitHub

เทมเพลต

App/index.html

 ค้นหา: <อินพุต ng-model = "query"> เรียงลำดับโดย: <เลือก ng-model = "orderprop"> <ค่าตัวเลือก = "ชื่อ"> ตัวอักษร </opoption> <ตัวเลือกค่า = "อายุ"> ใหม่ล่าสุด </optup> </select> <ul> <p> {{phone.snippet}} </p> </li></ul>

เราทำการเปลี่ยนแปลงต่อไปนี้ใน index.html:

ก่อนอื่นเราเพิ่มแท็ก <elect> ที่เรียกว่า OrderProp เพื่อให้ผู้ใช้ของเราสามารถเลือกวิธีการเรียงลำดับสองวิธีที่เรามีให้

จากนั้นเพิ่มตัวกรอง OrderBy หลังจากตัวกรองตัวกรองเพื่อประมวลผลข้อมูลที่ป้อนตัววนซ้ำ ตัวกรอง orderby ใช้อาร์เรย์เป็นอินพุตคัดลอกสำเนาและจัดเรียงสำเนาและส่งออกไปยังตัววนซ้ำ

AngularJS สร้างการเชื่อมโยงสองทางระหว่างองค์ประกอบที่เลือกและโมเดล OrderProp จากนั้น OrderProp จะถูกใช้เป็นอินพุตไปยังตัวกรอง OrderBy

ดังที่เราได้กล่าวไว้เมื่อเราพูดถึงการเชื่อมโยงข้อมูลและตัววนซ้ำในขั้นตอนที่ 3 ไม่ว่าแบบจำลองข้อมูลจะเปลี่ยนไปเมื่อใด (เช่นผู้ใช้เลือกคำสั่งที่แตกต่างกันในเมนูแบบเลื่อนลง) การเชื่อมโยงข้อมูล AngularJS จะอัปเดตมุมมองโดยอัตโนมัติ ไม่มีการดำเนินการ DOM ที่ซุ่มซ่าม!

ผู้ควบคุม

แอพ/js/controllers.js:

 ฟังก์ชั่น phonelistctrl ($ scope) {$ scope.phones = [{"ชื่อ": "nexus s", "snippet": "เร็วเพิ่งเร็วขึ้นด้วย Nexus S. ", "อายุ": 0}, {"ชื่อ": "Motorola Xoom ™กับ Wi-Fi" "Motorola Xoom ™", "ตัวอย่าง": "แท็บเล็ตรุ่นต่อไป", "อายุ": 2}]; $ scope.orderprop = 'อายุ';}

เราแก้ไขรุ่นโทรศัพท์ - อาร์เรย์โทรศัพท์มือถือ - เพิ่มแอตทริบิวต์อายุในบันทึกโทรศัพท์มือถือแต่ละเครื่อง เราจะจัดเรียงโทรศัพท์ตามแอตทริบิวต์อายุ

เราเพิ่มบรรทัดลงในรหัสคอนโทรลเลอร์เพื่อให้ค่าเริ่มต้นของ OrderProp เป็นอายุ หากเราไม่ได้ตั้งค่าเริ่มต้นโมเดลนี้จะยังคงไม่เริ่มต้นจนกว่าผู้ใช้ของเราจะเลือกคำสั่งซื้อในเมนูแบบเลื่อนลง

ตอนนี้เราควรพูดคุยเกี่ยวกับการผูกข้อมูลสองทาง โปรดทราบว่าเมื่อแอปกำลังโหลดในเบราว์เซอร์ "ใหม่ล่าสุด" จะถูกเลือกในเมนูแบบเลื่อนลง นี่เป็นเพราะเราตั้งค่า orderprop เป็น 'อายุ' ในคอนโทรลเลอร์ ดังนั้นการเชื่อมโยงการทำงานในทิศทางจากโมเดลของเราไปยังส่วนต่อประสานผู้ใช้ - นั่นคือการเชื่อมโยงข้อมูลจากโมเดลไปยังมุมมอง ตอนนี้เมื่อคุณเลือก "ตัวอักษร" ในเมนูแบบเลื่อนลงโมเดลข้อมูลจะได้รับการอัปเดตในเวลาเดียวกันและอาร์เรย์รายชื่อโทรศัพท์จะถูกจัดลำดับใหม่ ในเวลานี้การเชื่อมข้อมูลมีผลจากทิศทางอื่นนั่นคือการเชื่อมโยงข้อมูลจากมุมมองไปยังโมเดล

ทดสอบ

การเปลี่ยนแปลงที่เราทำสามารถตรวจสอบได้โดยการทดสอบหน่วยหรือการทดสอบแบบครบวงจร ก่อนอื่นดูการทดสอบหน่วย:

ทดสอบ/หน่วย/controllersspec.js:

 อธิบาย ('phonecat controllers', function () {อธิบาย ('phonelistctrl', function () {var scope, ctrl; ก่อนหน้า (ฟังก์ชั่น () {scope = {}, ctrl = new phonelistCtrl (scope);};}; });

ตอนนี้การทดสอบหน่วยตรวจสอบว่าค่าเริ่มต้นถูกตั้งค่าอย่างถูกต้อง

เราใช้อินเทอร์เฟซของจัสมินเพื่อแยกคอนโทรลเลอร์ PhonelistCtrl ลงในบล็อกก่อนหน้าซึ่งจะถูกแชร์โดยการทดสอบทั้งหมดในบล็อกหลักทั้งหมดอธิบาย

เรียกใช้การทดสอบหน่วยเหล่านี้เหมือนก่อนหน้านี้เรียกใช้สคริปต์./scripts/test.sh และคุณควรเห็นผลลัพธ์ต่อไปนี้ (หมายเหตุ: คุณต้องเปิด http: // localhost: 9876 ในเบราว์เซอร์ของคุณและเข้าสู่โหมดที่เข้มงวดก่อนที่การทดสอบจะทำงาน!):

 Chrome: Runner Reset ... การทดสอบทั้งหมด 2 ครั้ง (ผ่าน: 2; Fails: 0; ข้อผิดพลาด: 0) (3.00 ms) Chrome 19.0.1084.36 Mac OS: Run 2 การทดสอบ (ผ่าน: 2; Fails: 0; ข้อผิดพลาด 0) (3.00 ms)

ตอนนี้เราหันมาสนใจการทดสอบแบบ end-to-end

ทดสอบ/e2e/scenarios.js:

 ... มัน ('ควรเป็นไปได้ที่จะควบคุมคำสั่งโทรศัพท์ผ่านกล่องเลือกแบบเลื่อนลง', function () {// ให้แคบชุดข้อมูลให้แคบลงเพื่อทำการทดสอบการทดสอบที่สั้นลง ('Query') ป้อน ('แท็บเล็ต'); คาดหวัง (repeater ('โทรศัพท์ Li' XOOM/U2122 "]); SELECT ('OrderProp'). ตัวเลือก ('ตัวอักษร'); คาดหวัง (repeater ('. โทรศัพท์ li', 'รายการโทรศัพท์'). คอลัมน์ ('phone.name')). toequal (" motorola xoom/u2122 ",

การทดสอบแบบ end-to-end ตรวจสอบว่ากลไกการเรียงลำดับของกล่องตัวเลือกนั้นถูกต้อง

ตอนนี้คุณสามารถรีเฟรชเบราว์เซอร์ของคุณและเรียกใช้การทดสอบแบบ end-to-end อีกครั้งหรือคุณสามารถเรียกใช้บนเซิร์ฟเวอร์ AngularJS

ฝึกฝน

ในคอนโทรลเลอร์ PhonelistCtrl ให้ลบคำสั่งการตั้งค่าคำสั่งซื้อและคุณจะเห็นว่า AngularJS จะเพิ่มตัวเลือกที่ว่างเปล่าในเมนูแบบเลื่อนลงชั่วคราวและลำดับการเรียงลำดับเป็นการเรียงลำดับเริ่มต้น (เช่นไม่ได้เรียงลำดับ)

เพิ่ม `{{orderprop}} การเชื่อมโยงกับเทมเพลต index.html เพื่อแสดงค่าตามเวลาจริง

สรุป

ตอนนี้คุณได้ให้ฟังก์ชั่นการค้นหาสำหรับแอปพลิเคชันของคุณและทดสอบอย่างเต็มรูปแบบ ขั้นตอนที่ 5 เราจะเรียนรู้เกี่ยวกับบริการของ AngularJS และวิธีที่ AngularJS ใช้การฉีดพึ่งพา

ข้างต้นเป็นการรวบรวมข้อมูลสำหรับการผูกสองทาง AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!