Kako koristiti 'ng-model' u AngularJS s PRIMJERIMA

Sadržaj:

Anonim

Što je ng-model u AngularJs?

ng-model je direktiva u Angular.JS koja predstavlja modele i čija je primarna svrha vezati "pogled" na "model".

Na primjer, pretpostavimo da ste krajnjem korisniku htjeli predstaviti jednostavnu stranicu poput one prikazane dolje koja od korisnika traži da u tekstne okvire unese "Ime" i "Prezime". A onda ste htjeli osigurati pohranu podataka koje je korisnik unio u vaš podatkovni model.

Direktivu ng-model možete koristiti za mapiranje polja tekstualnog okvira "Ime" i "Prezime" na vaš podatkovni model.

Direktiva ng-model osigurat će da se podaci u "pogledu" i podacima vašeg "modela" sinkroniziraju cijelo vrijeme.

U ovom vodiču naučit ćete-

  • Atribut ng-model
  • Kako se koristi ng-model
    • Područje teksta
    • Ulazni elementi
    • Odaberite padajući obrazac elementa

Atribut ng-modela

Kao što je raspravljeno u uvodu u ovo poglavlje, atribut ng-model koristi se za povezivanje podataka u vašem modelu s prikazom predstavljenim korisniku.

Atribut ng-model koristi se za,

  1. Kontrole povezivanja poput unosa, područja teksta i odabira u prikazu u model.
  2. Osigurajte ponašanje provjere valjanosti - na primjer, provjera valjanosti može se dodati u tekstualni okvir tako da se u tekstni okvir mogu unijeti samo brojčani znakovi.
  3. Atribut ng-model održava stanje kontrole (Pod stanjem podrazumijevamo da se kontrola i podaci moraju uvijek sinkronizirati. Ako se vrijednost naših podataka promijeni, automatski će promijeniti vrijednost u kontroli i obratno)

Kako se koristi ng-model

1) Područje teksta

Oznaka područja teksta koristi se za definiranje kontrole višestrukog unosa teksta. Tekstualno područje može sadržavati neograničen broj znakova, a tekst se prikazuje fontom fiksne širine.

Pa sada pogledajmo jednostavan primjer kako možemo dodati direktivu ng-model u kontrolu područja teksta.

U ovom primjeru želimo pokazati kako možemo proslijediti višeredni niz iz kontrolera u prikaz i pridružiti tu vrijednost kontroli tekstualnog područja.

Event Registration


Guru99 Global Event


   Topic Description:

   

Objašnjenje koda:

  1. Ng model Direktiva se koristi za spajanje na varijablu član nazivom „pDescription” na „textarea” kontrole.

    Varijabla "pDescription" sadržavat će tekst koji će se proslijediti kontroli za područje teksta. Također smo spomenuli 2 atributa za kontrolu tekstualnog područja, a to su redovi = 4 i stupci = 50. Ti su atributi spomenuti kako bismo mogli prikazati više redaka teksta. Definiranjem ovih atributa tekstualno područje sada će imati 4 retka i 50 stupaca tako da može prikazati više redaka teksta.

  2. Ovdje pričvršćujemo varijablu člana na objekt opsega nazvan "pDescription" i stavljamo vrijednost niza u varijablu.
  3. Imajte na umu da stavimo / n literal u niz tako da tekst može biti u više redaka kada je prikazan u tekstnom području. / N Literal dijeli tekst na više redaka tako da se može prikazati u kontroli tekstualnog područja kao više redaka teksta.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Iz rezultata

  • Jasno se može vidjeti da je vrijednost dodijeljena varijabli pDescription kao dio objekta opsega proslijeđena kontroli tekstualnog područja.
  • Nakon toga prikazan je kad se stranica učita.

2) Ulazni elementi

Direktiva ng-model može se primijeniti i na ulazne elemente kao što su okvir za tekst, potvrdni okviri, radio gumbi itd.

Pogledajmo primjer kako možemo koristiti ng-model s vrstama unosa "textbox" i "checkbox".

Ovdje ćemo imati vrstu unosa teksta koja će imati naziv "Guru99" i postojat će 2 potvrdna okvira, jedan koji će biti označen prema zadanim postavkama, a drugi neće biti označen.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   Controller
   Models

Objašnjenje koda:

  1. Ng model Direktiva se koristi za spajanje na varijablu član nazivom „pname” za tekst kontrole tipa ulaz. Varijabla "pname" sadržavat će tekst "Guru99" koji će se proslijediti kontroli za unos teksta. Imajte na umu da se bilo kojem imenu može dati ime varijable člana.
  2. Ovdje definiramo naš prvi potvrdni okvir "Kontroleri" koji je pridružen varijabli člana Topics.Controllers. Potvrdni okvir bit će označen za ovu kontrolu provjere.
  3. Ovdje definiramo naš prvi potvrdni okvir "Modeli" koji je pridružen varijabli člana Topics.Models. Potvrdni okvir neće biti označen za ovu kontrolu provjere.
  4. Ovdje prilažemo varijablu člana zvanu "pName" i stavljamo vrijednost niza "Guru99".
  5. Deklariramo varijablu niza člana koja se naziva "Teme" i dajemo joj dvije vrijednosti, prva je "istinita", a druga je "lažna".

    Dakle, kada prvi potvrdni okvir dobije vrijednost true, potvrdni okvir bit će označen za ovu kontrolu, a s obzirom da je druga vrijednost netačna, potvrdni okvir neće biti označen za ovu kontrolu.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.

Izlaz:

Iz rezultata,

  • Jasno se može vidjeti da je vrijednost dodijeljena varijabli pName "Guru99"
  • Budući da je prva provjerna vrijednost "true", prošla je, potvrdni okvir je označen za potvrdni okvir "Controllers". Isto tako, budući da je druga vrijednost lažna, potvrdni okvir nije označen za potvrdni okvir "Modeli".

3) Odaberite padajući oblik obrasca elementa

Direktiva ng-model također se može primijeniti na element odabira i koristiti za popunjavanje stavki popisa na popisu odabira.

Pogledajmo primjer kako možemo koristiti ng-model s odabranom vrstom unosa.

Ovdje ćemo imati vrstu unosa teksta koja će imati naziv "Guru99", a tu će biti odabrani popis s 2 stavke popisa "Controller" i "Models".

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   
  1. Ng model Direktiva se koristi za spajanje na varijablu član „teme” na odabir kontrole tipa. Unutar kontrole odabira, za svaku od opcija, prilažemo varijablu člana Topics.option1 za prvu opciju i Topics.option2 za drugu opciju.
  2. Ovdje definiramo našu varijablu niza Topics koja sadrži 2 para ključ / vrijednost. Prvi par ima vrijednost "Kontroleri", a drugi ima vrijednost "Modeli". Te će se vrijednosti proslijediti za odabir ulazne oznake u prikazu.

    Ako se kôd uspješno izvrši, prikazat će se sljedeći izlaz.

Izlaz:

Iz izlaza se može vidjeti da je vrijednost dodijeljena varijabli pName "Guru99" i možemo vidjeti da odabrana kontrola ulaza ima opcije "Kontroleri" i "Modeli".

Sažetak

  • Modeli u Angular JS predstavljeni su direktivom ng-model. Primarna svrha ove direktive je vezati pogled za model. Kako izraditi jednostavni kontroler pomoću direktiva ng-app, ng-controller i ng-model.
  • Direktiva ng-modela može se povezati s kontrolom unosa "tekstualnog područja", a višeredni nizovi mogu se prenijeti iz kontrolera u prikaz.
  • Direktiva ng-model može se povezati s kontrolama unosa poput kontrola teksta i okvira za potvrdu kako bi bile dinamičnije u vremenu izvođenja.
  • Direktiva ng-model također se može koristiti za popunjavanje popisa odabira s opcijama koje se mogu prikazati korisniku.