การเรียนรู้และทำให้สมบูรณ์แบบในการทำงานประจำวันโดยใช้ Angular สามารถเพิ่มอาชีพของคุณได้อย่างรวดเร็วโดยเฉพาะอย่างยิ่งหากคุณยังใหม่ใน . ในบทความนี้เราจะพูดถึงงานอย่างหนึ่งที่นักพัฒนาต้องทำหลายพันครั้งนั่นคือการสร้างกล่องแบบเลื่อนลงที่ต่ำต้อย หัวข้อต่อไปนี้จะกล่าวถึงในบล็อกนี้:
Angular คืออะไร?
ถ้าคุณกำลังอ่านบล็อกเกี่ยวกับวิธีสร้างกล่องแบบเลื่อนลงโดยใช้ Angular ก็สามารถสันนิษฐานได้ว่าคุณมีแนวคิดทั่วไปเกี่ยวกับ Angular อยู่แล้ว สำหรับพวกคุณที่ไม่เคยเจอและเคยสะดุดกับบล็อกนี้เนื่องจากความหลากหลายและความเพ้อฝันของอินเทอร์เน็ต เป็นกรอบการพัฒนาส่วนหน้า ได้รับการพัฒนาและดูแลโดย Google ยักษ์ใหญ่ด้านเทคโนโลยี เป็นวิธีการแบบแยกส่วนในการพัฒนาเว็บแอปพลิเคชันแบบหน้าเดียวเช่น Gmail, PayPal และ Lego แอปพลิเคชันที่สร้างโดยใช้ Angular ใช้แนวทาง Model-View-View-Model
Dropdown Box คืออะไร?
กล่องแบบเลื่อนลงเป็นวิธีการที่สะอาดในการแสดงอาร์เรย์ของตัวเลือกเนื่องจากมีเพียงตัวเลือกเดียวเท่านั้นที่จะแสดงในตอนแรกจนกว่าผู้ใช้จะเปิดใช้งานกล่องแบบเลื่อนลง ในการเพิ่มช่องแบบเลื่อนลงในหน้าเว็บคุณต้องใช้ไฟล์ เลือก องค์ประกอบหรือ รายการ - รายการ . แท็กแรกในองค์ประกอบที่เลือกจะต้องมีการตั้งค่าตัวเลือกที่เลือกเป็นค่าที่เลือก นี่คือข้อมูลโค้ดเล็กน้อยที่จะแสดงให้คุณเห็นว่าฉันหมายถึงอะไร
วิทยาศาสตร์ข้อมูลใช้ทำอะไร
ตัวเลือก 1 ตัวเลือก 2 ตัวเลือก 3
แน่นอนว่าโค้ดด้านบนจะต้องใช้จาวาสคริปต์ที่เฉพาะเจาะจงเพื่อให้มีพฤติกรรมที่คาดหวัง แต่โครงกระดูกพื้นฐานของเมนูแบบเลื่อนลงยังคงเหมือนเดิม มาดูกันว่าเราทำอย่างไรใน Angular ตอนนี้
กล่องดรอปดาวน์โดยใช้เชิงมุม
พูดตามตรงแล้วมันค่อนข้างน่ากลัวที่จะแสดงให้เห็นถึงวิธีที่เป็นไปได้ทั้งหมดในการใช้กล่องดรอปดาวน์ในเชิงมุม สมองของนักพัฒนาซอฟต์แวร์ทุกคนจัดการตรรกะด้วยวิธีที่ไม่เหมือนใครและฉันเคยเห็นเมนูแบบเลื่อนลงที่บ้าคลั่งในอาชีพของฉัน ฉันจะถ่อมตัวและแสดงให้พวกคุณเห็นวิธีการเมนูแบบเลื่อนลงที่ค่อนข้างพื้นฐาน
วิธีที่ 1: การสร้างรายการแบบหล่นลงโดยใช้ ng-options
คุณสามารถใช้ตัวเลือก ng เพื่อสร้างเมนูแบบเลื่อนลงจากอาร์เรย์หรือรายการ
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})วิธีที่ 2: การสร้างรายการแบบหล่นลงโดยใช้ ng-repeat
Angular เป็นอเนกประสงค์ เห็นได้ชัดว่ามีหลายวิธีในการสร้างเมนูแบบเลื่อนลงพื้นฐาน คำสั่ง ng-repeat ทำซ้ำบล็อกของรหัส HTML สำหรับแต่ละรายการในอาร์เรย์สามารถใช้เพื่อสร้างตัวเลือกในรายการแบบเลื่อนลงได้ แต่คำสั่ง ng-options ถูกสร้างขึ้นโดยเฉพาะสำหรับการกรอกรายการแบบเลื่อนลงด้วยตัวเลือกและมีสิ่งสำคัญอย่างหนึ่ง ข้อดีคือเมนูแบบเลื่อนลงที่สร้างขึ้นด้วยตัวเลือก ng ทำให้ค่าที่เลือกเป็นวัตถุในขณะที่ดรอปดาวน์ที่ทำจาก ng-repeat จะต้องเป็นสตริง
ข้อมูลโค้ดนี้ใช้รายการเดียวกันโดยใช้ ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})สิ่งนี้นำเราไปสู่จุดสิ้นสุดของ 'รายการแบบเลื่อนลงโดยใช้เชิงมุม' ของบล็อกสั้น ๆ นี้ ฉันหวังว่าตอนนี้คุณจะมีความคิดว่าคุณจะใช้เมนูแบบเลื่อนลงในโครงการของคุณเองได้อย่างไร หากคุณมีข้อสงสัยเกี่ยวกับบล็อกนี้คุณสามารถโพสต์เป็นความคิดเห็นในส่วนความคิดเห็นด้านล่าง คุณยังสามารถแบ่งปันวิธีการสร้างสรรค์ของคุณเองในการสร้างกล่องแบบเลื่อนลงได้ด้วย
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Angular framework โปรดดูที่ไฟล์ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้จะช่วยให้คุณเข้าใจ Angular ในเชิงลึกและช่วยให้คุณมีความเชี่ยวชาญในเรื่องนั้น ๆ
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของ 'Angular Dropdown' แล้วเราจะติดต่อกลับไป