Học và hoàn thiện cách thực hiện một số công việc hàng ngày bằng Angular có thể thúc đẩy sự nghiệp của bạn khá nhanh, đặc biệt nếu bạn là người mới trong . Trong bài viết này, chúng ta sẽ thảo luận về một nhiệm vụ mà một nhà phát triển phải thực hiện hàng nghìn lần: tạo một hộp thả xuống khiêm tốn. Các chủ đề sau sẽ được đề cập trong blog này:
Angular là gì?
Chà, nếu bạn đang đọc một blog về cách tạo một hộp thả xuống bằng Angular, thì có thể cho rằng bạn đã có ý tưởng chung về Angular. Đối với những bạn chưa và đã tình cờ tìm thấy blog này do sự bất chợt và ảo tưởng của Internet, là một khung phát triển front-end. Nó được phát triển và duy trì bởi gã khổng lồ công nghệ, Google. Nó cung cấp một cách mô-đun để phát triển các ứng dụng web một trang như Gmail, PayPal và Lego. Các ứng dụng được xây dựng bằng Angular triển khai cách tiếp cận Model-View-View-Model.
Hộp thả xuống là gì?
Hộp thả xuống là một phương pháp rõ ràng để hiển thị một mảng tùy chọn vì chỉ một lựa chọn được hiển thị ban đầu cho đến khi người dùng kích hoạt hộp thả xuống. Để thêm một hộp thả xuống vào một trang web, bạn sẽ sử dụng lựa chọn phần tử hoặc một danh sách-mục . Thẻ đầu tiên trong phần tử chọn cần phải đặt tùy chọn đã chọn thành giá trị được chọn. Đây là một đoạn mã nhỏ để bạn hiểu ý tôi.
danh sách liên kết trong chương trình c
Phương án 1 Phương án 2 Phương án 3
Tất nhiên, đoạn mã trên sẽ cần javascript cụ thể của nó để có hành vi mong đợi, nhưng khung cơ bản của menu thả xuống vẫn giữ nguyên. Hãy xem cách chúng tôi thực hiện việc này trong Angular ngay bây giờ.
Hộp thả xuống sử dụng Angular
Thành thật mà nói, sẽ khá khó khăn khi chứng minh tất cả các cách có thể để triển khai một hộp thả xuống ở dạng góc cạnh. Bộ não của mỗi nhà phát triển xử lý logic theo cách riêng của họ và tôi đã thấy một số menu thả xuống điên rồ trong sự nghiệp của mình. Tôi sẽ khiêm tốn và chỉ cho các bạn một cách tiếp cận menu thả xuống khá cơ bản.
Phương pháp 1: Tạo danh sách thả xuống bằng ng-options
Bạn có thể sử dụng các tùy chọn ng để tạo một menu thả xuống từ một mảng hoặc danh sách các mục.
var app = angle.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Phương pháp 2: Tạo danh sách thả xuống bằng ng-repeat
Angular là một linh hoạt , rõ ràng có nhiều cách để tạo menu thả xuống cơ bản. Lệnh ng-repeat lặp lại một khối mã HTML cho mỗi mục trong một mảng, nó có thể được sử dụng để tạo các tùy chọn trong danh sách thả xuống, nhưng lệnh ng-options được tạo ra đặc biệt để điền vào danh sách thả xuống với các tùy chọn và có một điều quan trọng ưu điểm tức là các menu thả xuống được tạo bằng ng-options cho phép giá trị được chọn là một đối tượng, trong khi các menu thả xuống được tạo từ ng-repeat phải là một chuỗi.
Đoạn mã cụ thể này triển khai cùng một danh sách bằng cách sử dụng ng-repeat
{{name}} var app = angle.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Điều này đưa chúng ta đến phần cuối của blog khá ngắn này “danh sách thả xuống sử dụng góc cạnh”. Tôi hy vọng bây giờ bạn có ý tưởng về cách bạn có thể triển khai menu thả xuống trong dự án của riêng mình. Nếu bạn có bất kỳ nghi ngờ nào liên quan đến blog này, bạn có thể đăng chúng dưới dạng nhận xét trong phần bình luận bên dưới. Bạn cũng có thể chia sẻ cách tạo hộp thả xuống đầy sáng tạo của riêng mình.
Nếu bạn muốn tìm hiểu thêm về khung công tác Angular, hãy xem đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này sẽ giúp bạn hiểu sâu về Angular và giúp bạn đạt được thành thạo về chủ đề này.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của 'Angular Dropdown' và tôi sẽ liên hệ lại với bạn.