Învățarea și perfecționarea modului de realizare a anumitor sarcini de zi cu zi folosind Angular vă pot stimula cariera destul de repede, mai ales dacă sunteți nou . În acest articol, vom discuta despre o astfel de sarcină pe care un dezvoltator trebuie să o fi făcut de mii de ori: crearea unei casete drop-down umile. Următoarele subiecte vor fi tratate în acest blog:
Ce este Angular?
Ei bine, dacă citiți un blog despre cum să creați o casetă derulantă utilizând Angular, se poate presupune că aveți deja o idee generală despre Angular. Pentru cei dintre voi care nu au dat și au dat peste acest blog din cauza capriciilor și fanteziei internetului, este un cadru de dezvoltare front-end. Este dezvoltat și întreținut de gigantul tehnologic Google. Oferă o modalitate modulară de a dezvolta aplicații web cu o singură pagină, cum ar fi Gmail, PayPal și Lego. Aplicațiile construite folosind Angular implementează abordarea Model-View-View-Model.
Ce este o casetă dropdown?
O casetă derulantă este o metodă curată de a afișa o serie de opțiuni, deoarece se afișează inițial o singură alegere până când utilizatorul activează caseta derulantă. Pentru a adăuga o casetă derulantă la o pagină web, ar trebui să utilizați un Selectați element sau a list-item . Prima etichetă din elementul select trebuie să aibă opțiunea selectată setată la valoarea selectată. Iată un mic fragment de cod pentru a vă arăta la ce mă refer.
Opțiunea 1 Opțiunea 2 Opțiunea 3
Desigur, codul de mai sus ar avea nevoie de javascriptul său specific pentru a avea un comportament așteptat, dar scheletul de bază al unui meniu derulant rămâne același. Să vedem cum facem acest lucru acum în Angular.
cum se scrie o metodă de încercare
Casetă derulantă utilizând unghiular
Sincer vorbind, ar fi destul de descurajant să demonstrăm toate modalitățile posibile de a implementa o casetă drop-down în unghiular. Creierul fiecărui dezvoltator se ocupă de logică în felul său unic și am văzut câteva meniuri derulate nebunești în carieră. Voi fi umil și vă voi arăta băieți o abordare de meniu drop-down destul de simplă.
Metoda 1: Realizarea unei liste derulante folosind ng-options
Puteți utiliza opțiunile ng pentru a crea un meniu derulant dintr-o matrice sau o listă de articole.
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Metoda 2: Realizarea unei liste derulante folosind ng-repeat
Unghiular fiind un versatil , evident, are mai multe moduri de a crea un meniu derulant de bază. Directiva ng-repeat repetă un bloc de cod HTML pentru fiecare element dintr-o matrice, poate fi utilizată pentru a crea opțiuni într-o listă derulantă, dar directiva ng-options a fost făcută special pentru completarea unei liste derulante cu opțiuni și are una importantă avantaj, adică meniurile derulante realizate cu ng-options permit ca valoarea selectată să fie un obiect, în timp ce derulantele făcute din ng-repeat trebuie să fie un șir.
Acest fragment special de cod implementează aceeași listă folosind ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Acest lucru ne duce la sfârșitul acestui blog scurt „listă dropdown folosind unghiular”. Sper că acum aveți o idee despre cum ați putea implementa un meniu derulant în propriul dvs. proiect. Dacă aveți îndoieli cu privire la acest blog, le puteți posta ca un comentariu în secțiunea de comentarii de mai jos. De asemenea, ați putea partaja propriul mod creativ de a crea o casetă drop-down.
Dacă doriți să aflați mai multe despre cadrul angular, consultați pagina noastră care vine cu instruire live condusă de instructor și experiență de proiect din viața reală. Această instruire vă va ajuta să înțelegeți în profunzime Angular și vă va ajuta să obțineți stăpânirea asupra subiectului.
Ai o întrebare pentru noi? Vă rugăm să menționați acest lucru în secțiunea de comentarii din „Meniul derulant unghiular” și vă voi răspunde.