Kaj je ng-model v AngularJs?
ng-model je direktiva v programu Angular.JS, ki predstavlja modele in je njen glavni namen vezati "pogled" na "model".
Recimo, da ste želeli končnemu uporabniku predstaviti preprosto stran, kot je prikazana spodaj, ki od uporabnika zahteva, da v besedilna polja vnese "Ime" in "Priimek". Nato ste želeli zagotoviti, da shranite podatke, ki jih je uporabnik vnesel v vaš podatkovni model.
Direktivo ng-model lahko uporabite za preslikavo polj z besedilnimi polji »Ime« in »Priimek« v vaš podatkovni model.
Direktiva ng-model bo zagotovila, da bodo podatki v "pogledu" in podatkih vašega "modela" ves čas sinhronizirani.
V tej vadnici boste izvedeli-
- Atribut ng-model
- Kako uporabljati ng-model
- Območje besedila
- Vhodni elementi
- Izberite spustni element
Atribut ng-model
Kot je razloženo v uvodu tega poglavja, se atribut ng-model uporablja za vezavo podatkov v vašem modelu na pogled, predstavljen uporabniku.
Atribut ng-model se uporablja za,
- Nadzor vezave, kot so vnos, območje besedila in izbire v pogledu v model.
- Navedite preverjanje vedenja - na primer, validacijo lahko dodate v besedilno polje, tako da lahko v besedilno polje vnesete samo številske znake.
- Atribut ng-model ohranja stanje nadzora (pod stanjem mislimo, da se nadzor in podatki vežejo na sinhronizacijo. Če se vrednost naših podatkov spremeni, bo samodejno spremenila vrednost v kontrolniku in obratno)
Kako uporabljati ng-model
1) Območje besedila
Oznaka območja besedila se uporablja za določanje nadzora večvrstičnega vnosa besedila. Območje besedila lahko vsebuje neomejeno število znakov, besedilo pa se upodablja v pisavi s fiksno širino.
Torej, poglejmo si preprost primer, kako lahko nadzoru območja besedila dodamo direktivo ng-model.
V tem primeru želimo prikazati, kako lahko večvrstični niz prenesemo iz krmilnika v pogled in dodamo to vrednost kontrolniku območja besedila.
Event Registration Guru99 Global Event
Razlaga kode:
- Direktiva ng-model se uporablja za pritrditev spremenljivke člana, imenovane "pDescription", na kontrolnik "textarea".
Spremenljivka "pDescription" bo dejansko vsebovala besedilo, ki bo posredovano nadzorniku področja besedila. Omenili smo tudi 2 atributa za kontrolo textarea, ki sta vrstici = 4 in cols = 50. Ti atributi so bili omenjeni, da lahko prikažemo več vrstic besedila. Z določitvijo teh atributov bo besedilo zdaj imelo 4 vrstice in 50 stolpcev, tako da bo lahko prikazalo več vrstic besedila.
- Tukaj priključimo spremenljivko člana na objekt obsega, imenovan "pDescription", in spremenljivki damo vrednost v nizu.
- Upoštevajte, da v niz vstavimo dobesedno besedilo / n, tako da lahko besedilo vsebuje več vrstic, ko je prikazano v besedilnem območju. Dobesedno besedilo / n razdeli besedilo na več vrstic, tako da ga lahko v kontrolniku besedilnega polja upodobi kot več vrstic besedila.
Če se koda uspešno izvede, se med zagonom kode v brskalniku prikaže naslednji izhod.
Izhod:
Iz izhoda
- Jasno je razvidno, da je bila vrednost, dodeljena spremenljivki pDescription kot del predmeta obsega, posredovana kontrolniku textarea.
- Nato se prikaže, ko se stran naloži.
2) Vhodni elementi
Direktivo ng-model je mogoče uporabiti tudi za vhodne elemente, kot so besedilno polje, potrditvena polja, izbirni gumbi itd.
Oglejmo si primer, kako lahko uporabimo model ng s tipoma vnosa "textbox" in "checkbox".
Tu bomo imeli vrsto vnosa besedila, ki bo imelo ime "Guru99" in bosta 2 potrditveni polji, eno bo privzeto označeno, drugo pa ne.
Event Registration Guru99 Global Event
Razlaga kode:
- Direktiva ng-model se uporablja za pritrditev spremenljivke člana, imenovane "pname", na kontrolnik besedila vrste vnosa. Spremenljivka "pname" bo vsebovala besedilo "Guru99", ki bo posredovano nadzoru za vnos besedila. Upoštevajte, da je lahko imenu spremenljivke člana podano katero koli ime.
- Tu definiramo naše prvo potrditveno polje "Krmilniki", ki je pritrjeno na spremenljivko člana Topics.Controllers. Potrditveno polje bo označeno za ta kontrolni kontrolnik.
- Tu definiramo naše prvo potrditveno polje "Modeli", ki je priloženo spremenljivki člana Topics.Models. Potrditveno polje za ta kontrolni kontrolnik ne bo označeno.
- Tukaj prilagamo spremenljivko člana, imenovano "pName", in vstavimo nizno vrednost "Guru99".
- Deklariramo spremenljivko matrike članov, imenovano "Teme", in ji damo dve vrednosti, prva je "true", druga pa "false".
Ko torej prvo potrditveno polje dobi vrednost true, bo potrditveno polje označeno za ta kontrolnik, prav tako pa, ker je druga vrednost false, potrditveno polje za ta kontrolnik ne bo označeno.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Iz rezultata,
- Jasno je razvidno, da je vrednost, dodeljena spremenljivki pName, "Guru99"
- Ker je prva kontrolna vrednost "true", je bila potrjena, je potrditveno polje označeno za potrditveno polje "Krmilniki". Ker je druga vrednost napačna, potrditveno polje ni označeno za potrditveno polje "Modeli".
3) V spustnem meniju izberite obrazec elementa
Direktivo ng-model je mogoče uporabiti tudi za izbrani element in uporabiti za zapolnitev elementov seznama na izbranem seznamu.
Oglejmo si primer, kako lahko uporabimo ng-model z izbrano vrsto vnosa.
Tukaj bomo imeli vrsto vnosa besedila, ki bo imelo ime "Guru99", na voljo pa bo izbrani seznam z dvema elementoma seznama "Controller" in "Models".
Event Registration Guru99 Global Event
- Direktiva ng-model se uporablja za pritrditev spremenljivke člana, imenovane "Teme", na kontrolnik za izbrani tip. Znotraj kontrolnika za izbiro za vsako od možnosti priložimo spremenljivko člana Topics.option1 za prvo možnost in Topics.option2 za drugo možnost.
- Tu definiramo spremenljivko polja Topics, ki vsebuje 2 para ključ-vrednost. Prvi par ima vrednost "Krmilniki", drugi pa vrednost "Modeli". Te vrednosti bodo posredovane za izbiro vhodne oznake v pogledu.
Če se koda uspešno izvede, se prikaže naslednji izhod.
Izhod:
Iz izhoda je razvidno, da je vrednost, dodeljena spremenljivki pName, "Guru99" in vidimo, da ima izbrani vhodni nadzor možnosti "Krmilniki" in "Modeli".
Povzetek
- Modele v Angular JS predstavlja direktiva ng-model. Primarni namen te direktive je vezati pogled na model. Kako zgraditi preprost krmilnik z uporabo direktiv ng-app, ng-controller in ng-model.
- Direktivo ng-model je mogoče povezati z vhodnim nadzorom "območje besedila" in večvrstične nize je mogoče prenesti iz krmilnika v pogled.
- Direktivo ng-model je mogoče povezati s kontrolniki za vnos, kot so besedilo in kontrolna polja, da postanejo bolj dinamični med izvajanjem.
- Direktivo ng-model lahko uporabite tudi za zapolnitev izbranega seznama z možnostmi, ki jih lahko uporabnik prikaže.