Kako stvoriti padajući okvir koristeći Angular?

Na ovom blogu učimo kako stvoriti jednostavan padajući okvir pomoću okvira Angular. Padajući okvir izrađen je pomoću dvije jedinstvene metode.

Učenje i usavršavanje obavljanja određenih svakodnevnih zadataka pomoću Angulala može vam potaknuti karijeru prilično brzo, pogotovo ako ste novi u . U ovom ćemo članku razgovarati o jednom takvom zadatku koji je programer morao obaviti tisuće puta: stvaranju skromnog padajućeg okvira. Na ovom blogu bit će obrađene sljedeće teme:

Što je kutni?


Kutni logotip - Kutni MVC - edurekaPa, ako čitate blog o tome kako napraviti padajući okvir pomoću programa Angular, može se pretpostaviti da već imate opću ideju o programu Angular. Za one koji to nisu i koji su slučajno naletjeli na ovaj blog zbog hirova i mašte interneta, je front-end razvojni okvir. Razvija ga i održava tehnološki div Google. Pruža modularni način za razvoj web aplikacija s jednom stranicom kao što su Gmail, PayPal i Lego. Aplikacije izrađene pomoću Angular-a implementiraju pristup Model-View-View-Model.





Što je padajući okvir?

Rezultat slike za ikonu padajućeg izbornikaPadajući okvir čista je metoda prikazivanja niza opcija jer se u početku prikazuje samo jedan izbor dok korisnik ne aktivira padajući okvir. Da biste dodali padajući okvir web stranici, upotrijebite a Odaberi element ili a stavka popisa . Prva oznaka u elementu select mora imati odabranu opciju postavljenu na vrijednost odabranog. Evo malog isječka koda koji će vam pokazati na što mislim.

kako izbjeći mrtve točke u javi -
Opcija 1 Opcija 2 Opcija 3

Naravno, gornji kôd trebao bi svoj specifični javascript da bi imao očekivano ponašanje, ali osnovni kostur padajućeg izbornika ostaje isti. Pogledajmo kako to sada radimo u Angular-u.



Padajući okvir pomoću kutnog

Iskreno govoreći, bilo bi prilično zastrašujuće pokazati sve moguće načine za primjenu padajućeg okvira u kutnom obliku. Mozak svakog programera rješava logiku na svoj jedinstven način i u svojoj sam karijeri vidio neke lude padajuće jelovnike. Bit ću skroman i pokazati ću vam prilično osnovni pristup padajućem izborniku.

Metoda 1: Izrada padajućeg popisa pomoću ng-opcija

Možete koristiti ng-opcije za stvaranje padajućeg izbornika iz niza ili popisa stavki.

var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})

2. metoda: Izrada padajućeg popisa pomoću ng-repeat

Kutni je svestran , očito ima više načina za stvaranje osnovnog padajućeg izbornika. Direktiva ng-repeat ponavlja blok HTML koda za svaku stavku u nizu, može se koristiti za stvaranje opcija na padajućem popisu, ali direktiva ng-options napravljena je posebno za popunjavanje padajućeg popisa s opcijama i ima jednu važnu Prednost, tj. padajući izbornici napravljeni s ng-opcijama omogućuje odabranoj vrijednosti da bude objekt, dok padajući izbornici izrađeni od ng-repeat moraju biti niz.



Ovaj određeni isječak koda implementira isti popis pomoću ng-repeat

{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})

To nas dovodi do kraja ovog prilično kratkog 'padajućeg popisa bloga pomoću angular'. Nadam se da sada imate ideju kako biste mogli primijeniti padajući izbornik u svoj vlastiti projekt. Ako sumnjate u vezi s ovim blogom, možete ih poslati kao komentar u odjeljku za komentare u nastavku. Također možete podijeliti svoj vlastiti kreativni način izrade padajućeg okvira.

Ako želite saznati više o Angular framework-u, pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening pomoći će vam da dublje razumijete Angular i pomoći vam da postignete ovladavanje predmetom.

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare u 'Angular Dropdown' i javićemo vam se.