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?
Pa, 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?
Padajuć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.